微信小程序开发常见的拉起外部地图软件进行导航的功能

Posted 2021-11-28 wanf

<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, //打开后显示的地址名称
          })
        }
      })
    }
  }
})