微信小程序使用腾讯地图的操作流程且实现部分功能

微信小程序使用腾讯地图流程

第一步：申请腾讯地图账号

登录腾讯地图
开发文档 > 微信小程序 JavaScriptSDK

申请秘钥
没有应用的创建应用

应用创建完成后添加KEY，填写KEY名称 勾选微信小程序填写对应小程序的APPID，如需要勾选WebServiceAPI填写相关配置。

KEY 申请完成后会看见相关的KEY参数，这边就不展示了，返回到开发文档页，现在需要下载jssdk.js。解压后放在小程序中。

第二步：小程序账号相关配置

添加服务器域名 request路径：https://apis.map.qq.com

添加腾讯地图插件（主要根据自己的项目业务）

第三步：小程序添加相关配置

将下载的jssdk放置在文件夹下（我是直接放在页面的文件夹中，因为只有这个页面使用，项目只有这里使用就没有放在utils中，然后require引入即可。）

在微信小程的app.json中配置获取定位的权限

  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "requiredPrivateInfos": [
	"getLocation"
  ]

在对应的guideMap.wxml地图页面添加地图

<view>
 <map 
    wx:if="{{markersStatus}}"
    id="myMap" 
    class="maMap" 
    longitude="{{longitude}}" 
    latitude="{{latitude}}"  
    scale="16" 
    controls="{{controls}}" 
    bindcontroltap="controltap" 
    bindmarkertap="markertap" 
    polyline="{{polyline}}" 
    bindregionchange="regionchange" 
    markers="{{datatlist}}"
    show-location></map>
</view>

在对应的guideMap.wxss中添加样式

.mapView {
  width: 750rpx;
  height: 100vh;
}

.maMap{
  height: 100%;
  width: 100%;
}

在对应的guideMap.js中添加相关方法

// pages/guideMap/guideMap.js
var QQMapWX = require('./qqmap-wx-jssdk');
var qqMap;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    title: '名称',
    // 北京的经纬度
    latitude: 39.909088,    //纬度
    longitude: 116.397643,  //经度
    currentLocation: '',    //格式参考路线规划
    markersStatus: false,
    datatlist: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 实例化API核心类
    qqMap = new QQMapWX({key: 'II6BZ-TWI3I-5ACGF-ULFDK-M6YDF-DLBFK'});
    this.mapCtx = wx.createMapContext('myMap')

    var that = this;
    // 获取当前定位
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        console.log("res-------->", res)
        // 31.05755,121.71916
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          currentLocation: res.latitude.toString() + "," + res.longitude.toString(),
          // latitude: '31.05755',
          // longitude: '121.71916',
          // currentLocation: "31.05755,121.71916",
          markersStatus: true
        });

        // 详细操作查看文档
        // https://lbs.qq.com/service/webService/webServiceGuide/webServiceQuota
        qqMap.reverseGeocoder({
          success:function(res){
            console.log('-------->', res)
          }
        })

        that.getAround(res.longitude, res.latitude)
        
        that.setData({
          markersStatus: true
        })

      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
  // 标记点点击
  markertap(e){
    var that = this
    console.log('被点击了----》', e)
    let marks = this.data.datatlist
    for (let i = 0; i < marks.length; i++) {
      if(marks[i].id == e.markerId){
        console.log(marks[i].longitude, marks[i].latitude)
        let targetLocation = marks[i].latitude.toString() + "," + marks[i].longitude.toString();
        that.gotoLocation(targetLocation)
        break;
      }
    }
  },

  // 生成周边markers
  getAround(longitude, latitude){
    qqMap.search({
      location:{
        latitude: this.data.latitude,
        longitude: this.data.longitude,
      },
      keyword: '酒店',
      success: (res) => {
        console.log("地理位置", res);
        var mark = [];
        for (let i in res.data) {
          mark.push({
              iconPath: '../../assets/image/add2.png', //周边的图标    根据自己需要换
              alpha: 1,
              title: res.data[i].title,
              id: Number(i),
              longitude: res.data[i].location.lng,
              latitude: res.data[i].location.lat,
              width: parseInt(31.91) + 'px',//设置图标的大小
              height: parseInt(31.91) + 'px',
          })
        }
        // mark.push({
        //   iconPath: '../../assets/image/add2.png', //中心的图标     根据自己需要换
        //   id: Number(res.data.length),
        //   alpha: 1,
        //   longitude: longitude,
        //   latitude: latitude,
        //   width: parseInt(43.87) + 'px',
        //   height: parseInt(43.87) + 'px',
        // })
        this.setData({
          datatlist: mark,
        })
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    })
  },
   
  // 跳转到目标点
  gotoLocation(targetLocation){
    let that = this;
    // 调用距离计算接口
    // 用于路线获取
    qqMap.direction({
      //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      mode: 'walking',
      //from参数不填默认当前地址
      from: that.data.currentLocation, //当前定位
      to: targetLocation, //上海野生动物园定位
      success (res) {
        console.log('成功后所有数据',res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        console.log('解压前',coors[0]);
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        console.log('解压后',coors[0]);
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log('pl追加数据',pl)
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        that.setData({
          latitude:pl[0].latitude,
          longitude:pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#288B22',
            width: 5
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    })
  }
})

主要实现定位、通过经纬度添加标记点、点击标记点生成路线图
详细操作查看文档
https://lbs.qq.com/service/webService/webServiceGuide/webServiceQuota
点击标记点生成规划路线

文章为个人项目使用记录，如有任何不妥之处请及时告知，本人将在第一时间更新。3Q！