使用外部引入腾讯地图插件出现错误

[canbaozxc]

[问题简单描述]

问题复现步骤:

1. 通过vue指令安装mpvue
2. 在src目录下的utils文件夹中新建map目录并存放好用于微信小程序的qqmap-wx-jssdk.min.js
3. 回到pages目录在index页面引入腾讯地图组件qqmap-wx-jssdk.min.js，代码如下
   var QQMapWX = require('../../utils/map/qqmap-wx-jssdk.js'); var qqmapsdk;
   4.在页面生命周期created或者mounted里面添加实例化

// 实例化API核心类 qqmapsdk = new QQMapWX({ key: 'DZBBZ-2XSCW-U6IRS-OINHG-32MZZ-6EFF5' });

5.使用qqmapsdk调用组件各种功能
期望的表现:

[能够使用实例化的腾讯地图组件，进行城市，地址，周边信息查询]

观察到的表现:

出现两个报错
1.thirdScriptError
sdk uncaught third Error
Cannot assign to read only property 'exports' of object '#'
TypeError: Cannot assign to read only property 'exports' of object '#'
at Object. (http://127.0.0.1:36311/appservice/static/js/pages/map/main.js:671:28)
at Object._ (http://127.0.0.1:36311/appservice/static/js/pages/map/main.js:673:12)
at webpack_require (http://127.0.0.1:36311/appservice/static/js/manifest.js:71:31)
at Object._ (http://127.0.0.1:36311/appservice/static/js/pages/map/main.js:117:23)
at webpack_require (http://127.0.0.1:36311/appservice/static/js/manifest.js:71:31)
at Object._ (http://127.0.0.1:36311/appservice/static/js/pages/map/main.js:26:128)
at webpack_require (http://127.0.0.1:36311/appservice/static/js/manifest.js:71:31)
at Object._ (http://127.0.0.1:36311/appservice/static/js/pages/map/main.js:13:72)
at webpack_require (http://127.0.0.1:36311/appservice/static/js/manifest.js:71:31)
at Object.webpackJsonpCallback [as webpackJsonp] (http://127.0.0.1:36311/appservice/static/js/manifest.js:38:26)
2. pages/map/main.js 出现脚本错误或者未正确调用 Page()

屏幕截图和动态 GIF 图


[FIVELONG]

请问解决了吗，遇到了相同的问题

[zxzhgk]

我也遇到了

[zxzhgk]

解决了 把地图SDK放到static下，别让它被webpack 编译就不会报错了

[zxzhgk]

引入腾讯的微信小程序JavaScript SDK

因为微信小程序wx.getLocation API 返回的是地理位置坐标

所以要用到地址逆解析，然后就是一顿复制

var QQMapWX = require('xxx/qqmap-wx.js')...

然后就出问题了，貌似SDK最后的代码是这样导出的module.exports = QQMapWX;

改为export default QQMapWX; 引入改为import QQMapWX from 'XXX/qqmap-wx-jssdk.js'; 即可

百度的微信小程序JavaScript SDK和其类似，故此不再赘述

[mpvue-bot]

issue超过30天无更新或响应，7天后将自动关闭，如果问题状态有更新请及时更新issue

[zxzhgk]

https://blog.csdn.net/lq_qing/article/details/85218830

[ghostsatan]

VM3607:1 thirdScriptError
sdk uncaught third Error
Cannot read property 'userAgent' of undefined
TypeError: Cannot read property 'userAgent' of undefined
at http://127.0.0.1:24190/appservice/common/vendor.js:11052:102
at e.version (http://127.0.0.1:24190/appservice/common/vendor.js:11038:54)
at http://127.0.0.1:24190/appservice/common/vendor.js:11039:18
at http://127.0.0.1:24190/appservice/common/vendor.js:11035:20
at http://127.0.0.1:24190/appservice/common/vendor.js:11036:16
at a (http://127.0.0.1:24190/appservice/common/vendor.js:11022:25)
at Object. (http://127.0.0.1:24190/appservice/common/vendor.js:11023:12)
at Object.t.exports.render.t (http://127.0.0.1:24190/appservice/common/vendor.js:11431:12)
at e (http://127.0.0.1:24190/appservice/common/vendor.js:6228:23)
at Object.defineProperty.value (http://127.0.0.1:24190/appservice/common/vendor.js:7706:22)

我是报这个错 不知道问题出在什么地方 有人知道么

[ghostsatan]

import QQMapWX from '../../../static/lib/qqmap-wx-jssdk';
export default {
props: ['lat', 'lon'],
data: {
controls: [] // 地图控件
},
created () {
// this.mapCtx = wx.createMapContext('mapCon')
// this.movetoPosition()
// this.mapCtx.getCenterLocation({
// success: (res) => {
// console.log(res)
// },
// fail: ()=>{
// console.log(123);
// }
// })
this.onLoad();
this.onShow();
},
computed: {
// 地图控件
newControl: function () {
let _data = null
wx.getSystemInfo({
success: res => {
console.log(res);
}
})
return _data
}
},
methods: {
onLoad (){
console.log(QQMapWX)
qqmapsdk = new QQMapWX({
key: 'PYWBZ-KXNCR-P2SWB-WW6UI-NI7L5-XXXX'
});
},
onShow: function () {
// 调用接口
qqmapsdk.search({
keyword: '酒店',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
},
// 定位到本地坐标
movetoPosition () {
this.mapCtx.moveToLocation()
},
// 控件点击事件
bindcontroltap (e) {
switch (e.mp.controlId) {
case 1: this.movetoPosition()
break
case 2: console.log('2') // this.openCode()
break
case 3: wx.navigateTo({
url: '/pages/personal/main'
})
}
}
}
}
</script>

我是这样写的 一直报错

qqmapsdk is not defined

[ZhengKe996]

lib/qqmap-wx-jssdk.min.js 的导出方式不支持 Import引入 改用require