h5调用小程序API地图（vue）

第一步 下载小程序sdk

npm install weixin-js-sdk -D 或 cnpm install weixin-js-sdk -D

第二步 引入sdk

import wx from 'weixin-js-sdk'

第三步 定义config

data(){
  return {
    vxConfig: {
        debug: false,
        appId: '',
        timestamp: '',
        nonceStr: '',
        signature: '',
        jsApiList: [ 'getLocation', 'openLocation']
      }
  }
}

第四步 开始使用

mounted() {
  this.wxconfig().then(res => {
        console.log(res)
        if (res) {
          this.latitude = res.latitude || "36.69";
          this.longitude = res.longitude || "117.07";
        }
        this.getCityData()
      })
}
methods:{
   wxconfig () {
      return new Promise((resolve) => {
        let signLink =location.href.split('#')[0];
        if (wx == null) {
          return;
        }
        return $.ajax({
          type: 'POST',
          url: location.protocol + '//' + location.host + '/wxSignature',
          dataType: 'json',
          timeout: 6e3,
          data: {
            'url': signLink,
          },
          success: (rData) => {
            console.log(rData)
            if (rData) {
              this.vxConfig.appId = rData.appId;
              this.vxConfig.timestamp = rData.timestamp;
              this.vxConfig.nonceStr = rData.nonceStr;
              this.vxConfig.signature = rData.signature;
              wx.config(this.vxConfig);
            }
            setTimeout(function () {
              wx.getLocation({  // 打开小程序地图
                type: 'gcj02',
                success (res) {
                  resolve(res);
                },
                fail: function (err) {
                  Tools.showMsg('获取用户位置失败');
                  console.log("failres=" + JSON.stringify(err));
                  resolve()
                },
                cancel: function () {
                  Tools.showMsg('用户拒绝授权获取地理位置');
                  resolve()
                }
              });
            }, 300);
          }
        })
      })
    },
}

调用本地地图 （click事件）
mapNavigation (item) {
  wx.openLocation({
          latitude: item.lat || item.latitude,
          longitude: item.lon || item.longitude,
          name: item.detailAddress,
          address: item.name,
          scale: 16,
        })
}


![一定要看呦.png](https://upload-images.jianshu.io/upload_images/13996371-91501a5cfa41b32c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)