2020-09-23

记录小程序关于地图导航显示沿途商家的坐标方法
下个项目还需要用到 以免忘记

首先引入所需要的方法
// 引入SDK核心类
var QQMapWX = require(’…/qqmap-wx-jssdk.js’);
var qqmapsdk = new QQMapWX({
key: ‘***你的Key’ // 必填
});

根据小程序自带的定位获取当前经纬度信息

getLocation() {
    let that = this
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        that.setData({
          latitude: latitude,
          longitude: longitude
        })
        console.log(res)
        console.log(latitude, longitude)
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function (res) {
            console.log(res.result);
            let s='search1.title' //显示当前位置如图1
            that.setData({
              [s]:res.result.formatted_addresses.recommend
            })
          },
          fail: function (res) {
            console.log(res);
          },
        })  
      }
    })
},

图1

目的地输入关键字显示地点列表

		qqmapsdk.getSuggestion({
	      //获取输入框值并设置keyword参数
	      keyword: event.detail, //用户输入的关键词，可设置固定值,如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
	          });
	        }
	        that.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示如图2
	          addressList: sug
	        });
	      },
	      fail: function (error) {
	        console.error(error);
	      },
	      complete: function (res) {
	        console.log(res);
	      }
	 });

图2

根据两点经纬度坐标规划路线

	qqmapsdk.direction({
      mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from: from,   //如 '128.6482393,32.6283222'
      to: to,   	//如'130.6482393,33.6283222'
      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属性，将路线显示出来,将解压坐标第一个数据作为起点
        that.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#00BFFF',
            width: 4
          }]
        })
        that.getMarkersList()
        that.getMarkersGoodsList()
        that.formSubmit(from, to)
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
});

路线规划如下图

地图地点标记图标可根据服务端返回不同类型展示不同图标样式

根据返回的数组类型数据赋值给markers即可
wxml