微信小程序開發常見的拉起外部地圖軟件進行導航的功能

<view class="dh" bindtap="mapNavigation" data-addr="{{address}}">
      導航
      <image class="imageD" src="{{pathUrl}}dh.png"></image>
</view>

 

// 引入SDK核心類
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
var qqmapsdk;

Component({
  options: {
    multipleSlots: true
  },
  properties: {
  },
  data: {
    pathUrl: 'https://nlwxapp.oss-cn-beijing.aliyuncs.com/nl-club-image/',
    address: '湖北省武漢市光谷軟件園F棟'
  },
  onReady: function (res) {
  },
  methods: {
    phoneCall() {
      wx.makePhoneCall({
        phoneNumber: '18971401345'
      })
    },
    mapNavigation(e) {
      // console.log(e)
      console.log(e.target.dataset.addr);
      var addr = e.target.dataset.addr;
      var that = this;
      // 使用 JavaScript SDK 獲取目的地經緯度
      // 實例化API核心類
      qqmapsdk = new QQMapWX({
        key: 'TJQBZ-XB333-RGM3W-3Q2DL-7XWV5-DGFQL'
      });
      qqmapsdk.geocoder({
        address: addr,
        success: function (res) {
          console.log(res);
          var local = res.result.location;
          that.setData({
            latitude: local.lat,
            longitude: local.lng
          })
        }
      })
      // 使用微信內置地圖查看位置
      wx.getLocation({
        type: 'gcj02', //返回能夠用於wx.openLocation的經緯度
        success: function (res) {
          wx.openLocation({
            latitude: that.data.latitude,
            longitude: that.data.longitude,
            scale: 28,
            name: addr, //打開後顯示的地址名稱
          })
        }
      })
    }
  }
})