微信小程序中使用腾讯地图，导航到目的地

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39378691/article/details/85067600

1.效果图如下：（点击地图可导航，从用户当前位置到目的地）

2. wxml文件中

（1）目标地址location

<!-- 地址 -->
<view class='loc'>
  <view>
    <text class='iconfont icon-location'></text>
  </view>
  <view class='location'>{{location}}</view>
</view>

（2）地图map

<!-- 地图 -->
<view class='maps'>
  <view class="page-section page-section-gap">
    <map
      id="myMap"
      style="width: 100%; height: 100%; border-radius: 20px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      bindtap="getLoc"
      show-location
    ></map>
  </view>
</view>

3. js文件中

（1）前提是已经申请了腾讯地图的密钥，下载js放在utils文件中，在js文件中引入

var app = getApp();
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk;

（2）页面的初始数据，包括地址location，纬度latitude，经度longitude和图标定位markers

Page({
  data: {
    phone: "",
    location: "",
    latitude: "",
    longitude: "",
    // 图标定位
    markers: [],
  },

（3）wx.request请求后台数据，包括location，latitude，longitude，返回的经纬度也赋给markers数组（定位图标所需）

// 数据加载
  onLoad: function (options) {
    var that = this;
    // 发送请求，GET
    // 成功后台返回location，latitude，longitude
    wx.request({
      url: 'https://XXXXXX?userId=' + app.id,
      method: 'GET',
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      success: function (res) {
        that.setData({
          // 地址+经纬度
          location: res.data.data.address,
          latitude: res.data.data.lat,
          longitude: res.data.data.lng,
          // 电话
          phone: res.data.data.phone,
          // 定位标志的经纬度
          markers: [{
            latitude: res.data.data.lat,
            longitude: res.data.data.lng,
          }]
        });
      },
      fail: function (res) {
        console.log('失败了');
      }
    });
  },

（4）点击地图，先调用wx.getLocation获取当前用户的经纬度（导航所需），成功之后，再调用wx.openLocation打开地图

// 地图
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  },

// 地图导航
  getLoc: function (e) {
    // console.log(e.currentTarget.id);  // 获取当前点击的数组下标
    var that = this;
    wx.getLocation({
      type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
      success: function (res) {
        //使用微信内置地图查看位置接口
        wx.openLocation({
          latitude: parseFloat(that.data.latitude),  // 要去的地址经度，浮点数
          longitude: parseFloat(that.data.longitude),  // 要去的地址纬度，浮点数
          name: '终点位置',  // 位置名
          address: that.data.location,  // 要去的地址详情说明
          scale: 18,   // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: 'http://www.gongjuji.net'  // 在查看位置界面底部显示的超链接,可点击跳转（测试好像不可用）
        });
      },
      cancel: function (res) {
        console.log('地图定位失败');
      }
    })
  },

希望对你有帮助，若有疑问可留言讨论，谢谢~