mpvue微信小程序引入腾讯地图sdk

1. 申请key

官网地址传送门

2. 下载sdk到本地

微信小程序JavaScript SDK

3. 添加sdk到工程

把下载下来的sdk放到mpvue工程的static目录下，保证不被webpack编译到。要是放在pages目录中会报错的。

4. 引入js文件

在你需要获取位置服务的.vue文件中引入这个js文件，像我的路径是这样：

// index.vue
import QQMapWX from '../../../static/js/qqmap-wx-jssdk.js'
复制代码

5. 调用

data () {
    return {
        qqMapSdk: null
    }
},
 created () {
    // let app = getApp()
    // 实例化API核心类
    this.qqMapSdk = new QQMapWX({
      key: '你在官网申请到的key'  
    })
    this.getCurLocation()
  },
 methods: {
    /**
     * 获取当前位置
     */
    getCurLocation() {
      let self = this
      wx.getLocation({
        type: 'gcj02 ',
        success: function (res) {
          // 调用接口
          self.qqMapSdk.reverseGeocoder({
            location: {
              latitude: res.latitude,
              longitude: res.longitude
            },
            success: function (res) {}
          })
 }
复制代码

6. 坑

出现这个错误是我根据别的博客文章，去修改了qqmap-wx-jssdk.js里面：

// module.exports = QQMapWX;  // 原本长这样
export default QQMapWX;  // 我根据别的文章改成这样
复制代码

结果就报错了。后来我就放弃修改，也就是没有修改qqmap-wx-jssdk.js，原原本本地用module.exports = QQMapWX;然后就没报错了，能正常使用。

参考

1. mpvue 引入腾讯提供的的微信小程序地图 JavaScript SDK
2. 使用外部引入腾讯地图插件出现错误

转载于:https://juejin.im/post/5c820aaf6fb9a049ad77d7e1