微信小程序地图开发总结-规划路线

这是我做出来的自动规划效果，比较潦草功能勉勉强强算是实现了的

在微信小程序中使用腾讯地图服务

虽然map组件使我们可以很方便的使用地图，但是map组件只提供了最基本的地图显示功能，同时，微信小程序提供的关于地图的API也只是提供了一些简单的功能，在实际中无法满足我们的各种需求，如果需要使用到路线规划，距离计算等功能，我们可以在微信小程序中接入腾讯地图，高德地图，百度地图等服务，再结合map组件，去实现我们需要的功能

下面以腾讯地图为例来介绍如何在微信小程序中使用腾讯地图服务

1、密钥的申请以及域名的设置

在微信小程序中使用腾讯地图服务大致需要进行如下几个过程：

（1）申请开发者密钥

这里需要填写Key的名称，名称可以根据实际项目应用来命名，申请成功后，会生成一串开发者密钥

（2）开通webserviceAPI服务

a、点击右上角的控制台

b、选择key管理

c、进入设置，勾选webserviceAPI，点击保存

（3）域名的配置

上面的两个步骤都是在腾讯位置服务平台上进行的操作，要进行域名的配置，还需要登录微信公众平台进行域名的配置

在开发小程序时，我们都会使用自己的APPID进行开发，只有配置了相关的域名，在请求时才能向指定的域名发送请求

在"设置" -> "开发设置"中设置request合法域名，添加https://apis.map.qq.com

（4）下载微信小程序JavaScriptSDK

如果完成了上面几个步骤，我们就可以在微信小程序中使用腾讯地图服务啦，在微信小程序中新建一个项目，写入APPID，记得这个APPID需要在微信公众平台中进行了域名的配置，不然会报错

2、实现路线规划

下面举一个简单的小例子，给定起点和终点经纬度，计算出起点和终点之间的路线

首先，需要引入我们刚才下载的JavaScriptSDK

javascript 复制代码

// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');

进行API核心类的实例化

javascript 复制代码

// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});

接着，我们需要通过调用路线规划的接口direction获取路线，direction接口可以提供驾车、骑行、步行、公交等路线规划功能

direction接口传入的参数如下

（1）mode

String，路线规划选择，可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行）、'transit'（公交），默认：'driving'

（2）from

String格式：lat<纬度>,lng<经度>（例：from: '39.984060,116.307520'）

Object格式：{latitude: 纬度,longitude: 经度}（例：from: { latitude: 39.984060, longitude: 116.307520 }）

（3）to

String格式：lat<纬度>,lng<经度>（例：location: '39.984060,116.307520'）

Object格式： { latitude: 纬度, longitude: 经度 } （例：to: { latitude: 39.984060, longitude: 116.307520 }）

下面给一个根据起点和终点实现路线规划的例子

javascript 复制代码

<!--wxml-->
<map id="myMap" style="width: 100%; height: 300px;"
longitude="{{longitude}}" latitude="{{latitude}}" scale='16' polyline="{{polyline}}" show-location></map>

<!--js-->
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥（key）' // 必填
});
Page({
    data: {
        srcLat: '起点经度',
        srcLng: '起点纬度',
        dstLat: '终点经度',
        dstLng: '起点纬度',
        latitude: '',
        longitude: ''
    },
    onLoad() {
        var _this = this;
        //调用距离计算接口
        qqmapsdk.direction({
            mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
          from: {
              latitude: _this.data.srcLat,
              longitude: _this.data.srcLng
          },
          to: {
              latitude: _this.data.dstLat,
              longitude: _this.data.dstLng
          }, 
          success: function (res) {
              console.log(res);
              var ret = res;
              var coors = ret.result.routes[0].polyline, pl = [];
              //坐标解压（返回的点串坐标，通过前向差分进行压缩）
              var kr = 1000000;
              for (var i = 2; i < coors.length; i++) {
                  coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
              }
              //将解压后的坐标放入点串数组pl中
              for (var i = 0; i < coors.length; i += 2) {
                  pl.push({ latitude: coors[i], longitude: coors[i + 1] })
              }
              console.log(pl)
              //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
              _this.setData({
                  latitude:pl[0].latitude,
                  longitude:pl[0].longitude,
                  polyline: [{
                      points: pl,
                      color: '#FF0000DD',
                      width: 4
                  }]
               })
          },
          fail: function (error) {
              console.error(error);
          },
          complete: function (res) {
              console.log(res);
           }
       });
        
    }
})

这是从这个大佬的网站学到的知识点，快做笔记！还有好多细节方面的东西等待我们去学习！https://www.cnblogs.com/Yellow-ice/p/11133283.html