效果图.png

        最近有个项目需要用到地图组件,底层使用的库包是"@amap/amap-jsapi-loader": "^1.0.1",我下载的高德官网实例DEMO地址是https://a.amap.com/jsapi_demos/static/JSAPI_ReactAndVue/JSAPI_Vue3.zipz

这个版本是vue3+vue-cli+javascript的,底层使用的webpack打包的,不过项目真的有点老了,npm i就跑不起来了,有2处报错。

npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN cleanup Failed to remove some directories [
npm WARN cleanup   [
npm WARN cleanup     'E:\\迅雷下载\\JSAPI_Vue3\\node_modules\\webpack-dev-server\\node_modules',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'E:\迅雷下载\JSAPI_Vue3\node_modules\webpack-dev-server\node_modules'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'E:\\迅雷下载\\JSAPI_Vue3\\node_modules\\webpack-dev-server\\node_modules'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'E:\\迅雷下载\\JSAPI_Vue3\\node_modules\\unset-value',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'E:\迅雷下载\JSAPI_Vue3\node_modules\unset-value\node_modules\has-value'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'E:\\迅雷下载\\JSAPI_Vue3\\node_modules\\unset-value\\node_modules\\has-value'
npm WARN cleanup     }
npm WARN cleanup   ]
npm WARN cleanup ]
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npm.alibaba-inc.com/yorkie/download/yorkie-2.0.0.tgz failed, reason: connect ETIMEDOUT 110.75.144.103:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     d:\npm\cache\_logs\2023-04-12T00_30_12_491Z-debug-0.log


        最终分析的结果就是package-lock.json中源的地址域名已经弃用了,我们可以直接删除掉该文件再执行npm i即可。然后NPM RUN SERVE 还是会报错:

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

        这个我本地的nodejs版本是v18.15.0,应该就是版本过高导致旧项目中的openssl无法正常兼容,解决的办法也是比较简单的,windows下添加环境变量名NODE_OPTIONS,变量值为--openssl-legacy-provider,修改完记得要重新开一个cmd终端才会生效。

        如果你的项目是vite2/3+vue3+ts的话,你再继续看下去。你直接用实例中的代码会报错@vue/reactivity not defined,这里有两种解决方案:

方式①:import {shallowRef} from '@vue/reactivity';//需要安装@vue/reactivity,pnpm i @vue/reactivity

方式②:import {shallowRef} from 'vue';

        解决完执行,还是空白页,地图内容还是不出来,查看开发者工具,还有一个报错:

Error: Invalid Object: Pixel(NaN, NaN)
    at new r (maps?callback=___onAPILoaded&v=2.0&key=048d416f939c887af092fe40d617deca&plugin=AMap.ToolBar,AMap.Driving:1:61992)
    at L.lngLatToContainer (maps?callback=___onAPILoaded&v=2.0&key=048d416f939c887af092fe40d617deca&plugin=AMap.ToolBar,AMap.Driving:1:787827)
    at A._setStyle (maps?callback=___onAPILoaded&v=2.0&key=048d416f939c887af092fe40d617deca&plugin=AMap.ToolBar,AMap.Driving:1:746719)
    at A.updateOverlay (maps?callback=___onAPILoaded&v=2.0&key=048d416f939c887af092fe40d617deca&plugin=AMap.ToolBar,AMap.Driving:1:745949)
    at z.updateOverlay (maps?callback=___onAPILoaded&v=2.0&key=048d416f939c887af092fe40d617deca&plugin=AMap.ToolBar,AMap.Driving:1:755192)
    at z._add (maps?callback=___onAPILoaded&v=2.0&key=048d416f939c887af092fe40d617deca&plugin=AMap.ToolBar,AMap.Driving:1:756488)
    at A.add (maps?callback=___onAPILoaded&v=2.0&key=048d416f939c887af092fe40d617deca&plugin=AMap.ToolBar,AMap.Driving:1:743839)
    at me.add (maps?callback=___onAPILoaded&v=2.0&key=048d416f939c887af092fe40d617deca&plugin=AMap.ToolBar,AMap.Driving:1:742143)
    at L.add (maps?callback=___onAPILoaded&v=2.0&key=048d416f939c887af092fe40d617deca&plugin=AMap.ToolBar,AMap.Driving:1:786701)
    at App.vue:57:30

        真是一脸懵逼,直接改版,使用script setup语法糖重新写了一遍代码,报错消失了,具体什么原因暂时不知道,感觉还是map没有定义好吧。具体代码可以下载:

vue3+vite2/3+typescript官网改版

https://download.csdn.net/download/hehu158/87680742

vue3+vue-cli+javascript官网完美修复版本

https://download.csdn.net/download/hehu158/87680780

        分享就到此为止吧,也希望官网能好好看下这些个demo,能更新也尽量更新下。


本文链接:http://www.20m8.com/179.html

热门文章

jiaminghi/data-view改造版dataV for vite2/3+vue3/2项目

dataV是个不错的选择,就是原生支持vue-cli的webpack打包工具,不支持vite,不过站长还算完美地解决了这个问题。

查看全文 hehu158 于 2021-07-30 11:07 发表在 Vue ( 阅读:6895 )

Vue2/VUE3子组件如何调用父组件变量以及函数

本文主要分析下子组件如何调用父组件的变量跟函数。

查看全文 hehu158 于 2019-12-27 16:03 发表在 Vue ( 阅读:4077 )

vue项目使用font-spider压缩后的外部字体

vue使用font-spider压缩字体文件的爬坑记录

查看全文 hehu158 于 2020-04-25 10:57 发表在 Vue ( 阅读:3502 )

vue3如何快速获取网址中的get参数

vue3下快速获取网址中的url参数,网上基本上都是vue2的,所以站长整理了下解决方案

查看全文 hehu158 于 2021-08-17 14:11 发表在 Vue ( 阅读:3344 )

MUI实现图片无缝循环轮播不用mui-slider-item-duplicate的快速解决方案

mui轮播还是ok的,循环轮播就不行了哈,通过简单的JavaScript代码完善下就解决

查看全文 hehu158 于 2020-03-06 17:01 发表在 Vue ( 阅读:3064 )

hoppscotch使用pnpm搭建windows机子卡死的一种解决方案

pnpm跟360有冲突,我也是第一次见识。

查看全文 hehu158 于 2021-12-07 16:17 发表在 Vue ( 阅读:2513 )

vue3+three.js加载3d效果爬坑日志-支持vite2.4.4

three.js一个js三维模型库,陌生是挺陌生的,不过学习的话,我们还是要从官网开始,别随便拿别人的代码套。

查看全文 hehu158 于 2021-07-09 16:09 发表在 Vue ( 阅读:2126 )

cnpm+electron+vue3+vite2+mqtt项目DEMO

让electron支持vite2,非常不错,让vue3跑mqtt,十分完美的组合,还支持cnpm。

查看全文 hehu158 于 2021-12-09 09:04 发表在 Vue ( 阅读:2020 )

main.js跟.vue2文件间的通信

整理vue公共函数,放置到main.js,在main.js设置全局变量,实现main.js跟.vue文件间的数据通信。

查看全文 hehu158 于 2020-01-02 17:37 发表在 Vue ( 阅读:1895 )

vite2 vue3 兼容库包好用到爆

vite2 vue3 兼容库包,站长用完才能偷偷告诉你。

查看全文 hehu158 于 2021-09-30 09:37 发表在 Vue ( 阅读:1847 )