地图类微信小程序2——查询及路径寻找

功能1 查询

调用腾讯地图api即可，实现代码如下:

/**
   * 
   * 地图的函数
   * 
   */
  backfill: function (e) {
    var id = e.currentTarget.id;
    
    for (var i = 0; i < this.data.suggestion.length; i++) {
      if (i == id) {
        var mks = []
        mks.push({
            title: this.data.suggestion[i].title,
            id: 0,
            latitude: this.data.suggestion[i].latitude,
            longitude: this.data.suggestion[i].longitude,
            iconPath: '../images/ins.png',//图标路径
            width: 20,
            height: 20,
            callout: { //在markers上展示地址名称，根据需求是否需要
              content: this.data.suggestion[i].address,
              color: '#000',
              display: 'ALWAYS'
            }
          }),
        this.setData({
          cha:1,
          cha1:1,
          backfill: this.data.suggestion[i].title,
          dingwei:mks,
          poi: {
            latitude: this.data.suggestion[i].latitude,
            longitude: this.data.suggestion[i].longitude,
          }
        });
      }
    }
  },

  //触发关键词输入提示事件
  getsuggest: function (e) {
    var _this = this;
    this.data.cha = 0;
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: e.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
      //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
      success: function (res) {//搜索成功后的回调
        console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          suggestion: sug,
          cha1:0,
          cha:1
        });
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },

代码来源位官网示例代码，添加信号量保证搜索和地图显示分离

如图
如图

功能2 路径寻找

继续去看官方api，发现官方提供了路径寻找的接口，可以返回多种多样的返回值
传送门
于是开始试着写

guihua(e) {
    var that = this
    this.setData({
      polyline: []
    })
    console.log(e.currentTarget.dataset.type)
    var type = e.currentTarget.dataset.id
    var loclat = this.data.latitude
    var loclng = this.data.longitude
    var tolat = this.data.toLat
    var tolng = this.data.toLng
    var url = ""
    if (type == 3) {
      url = "https://apis.map.qq.com/ws/direction/v1/driving/"
    }
    if (type == 1) {
      url = "https://apis.map.qq.com/ws/direction/v1/bicycling/"
    }
    if (type == 0) {
      url = "https://apis.map.qq.com/ws/direction/v1/walking/"
    }
    wx.request({
      url: `${url}?from=${loclat},${loclng}&to=${tolat},${tolng}&key=WFUBZ-OEVC5-手动打码`,
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        // success
        console.log(res)
        var ret = res.data
        if (ret.status != 0) return; //服务异常处理
        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] })
        }
        //设置polyline属性，将路线显示出来
        that.setData({
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 2
          }]
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })

绑定函数，在map内加入polyline选项即可显示，默认颜色为红色没有找到在哪里修改

成功

功能都实现完毕了

下一步工作就是写后台对路径和定位点进行保存形成历史记录