关于高德地图JS API VUE3官网实例修复的简单说明

        最近有个项目需要用到地图组件，底层使用的库包是"@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，能更新也尽量更新下。