技术思考 微信小程序【腾讯位置服务】

191 阅读2分钟

腾讯位置服务

注册账号

申请Key

设置名称和输入验证码,勾选sdk、webServiceApi默认勾选白名单,小程序输入自己的 APP Id,点击确定按钮创建。

appid

最后看到密钥即可成功。

key申请

下载SDK

在官方文档 下载SDK ,下载后有两个版本,哪个都可以正常使用。注意最后引入时的文件名。

安全域名设置

登录微信小程序后台设置安全域名。安全域名在下载SDK步骤的下面可复制。

使用

根据官方文档 路线规划 ,复制其结构代码。

根据代码,解释其中的变量:

  • longitude:中心经度
  • latitude:中心维度
  • polyline:一开始固定的位置
<map
  id="myMap"
  style="width: 100%; height: 300px;"
  longitude="{{longitude}}" latitude="{{latitude}}"
  scale='16'
  polyline="{{polyline}}"
  show-location
>
</map>

然后继续往下滑,复制 JS 代码,require 中修改自己在第三步下载并解压好的sdk的文件路径,然后修改第二步自己申请好的key。

var QQMapWX = require('../../qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '自己的key' // 必填
});

继续往下看,有一个表单事件,我们只需要里面的逻辑代码,复制下来,粘贴到 onReady 函数内。运行发现报错,一个一个修改。

  1. 首先,fromto 的参数有误,因为我们是写死的,不是获取用户动态输入的,因此没有事件对象e,写死两个对象,一个起始位置,一个结束位置。
  2. 最后 polyline 数组对象内的 color 属性有误,不是正常的16进制,改过来即可。这个颜色是起始位置到目的地的中间的路程线路颜色。
  onReady() {
    var _this = this;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
      //from参数不填默认当前地址
      from: {
        longitude: 113,
        latitude: 23,
      },
      to: {
        longitude: 103,
        latitude: 23,
      },
      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: '#333999',
            width: 4
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },

最后根据我设置的经纬度,成功定位到了广州去昆明的路线。

xiaoguo