uniapp微信小程序引入高德地图遇到的问题及解决方案,适用于vue3版本

947 阅读1分钟

今天用uniapp引入高德地图的插件市,出现了一个问题,ts+vue3版本

image.png 根据官方的案例,是通过require方式引入,但是uniapp对require引入有报错

image.png 解决办法: import方式导入js模块需要在js文件中声明export导出,查看amap-wx.130.js文件发现文件末尾的导出是这样写的 module.exports.AMapWX=AMapWX。把module.exports.AMapWX=AMapWX; 替换成  export default { AMapWX } 就可以解决。

然后引入成功后有报错,原因是当前经纬度获取失败,需要配置

image.png

解决办法: 打开uniapp的配置文件manifest.json,选择“源码视图”,配置完成一下代码,就可以正常调取接口,该作用是,授权获取小程序的当前地址。

/* 小程序特有相关 */
"mp-weixin": {
    "appid": "你的开发者id",
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true
    },
    "usingComponents": true,
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
    },
    "requiredPrivateInfos": ["getLocation", "chooseLocation"]
},