小程序中规划地图路径在地图上显示、并且标记当前移动的位置

小咪咪 2022-02-26 14:24 199阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

wxml

css

map{width: 100% !important;height: 800px !important;}

js.

Page({
      data: {
        markers: [{
          iconPath: "../images/img1.jpg",
          id: 0,
          latitude: 23.099994,
          longitude: 113.324520,
          width: 50,
          height: 50
        },
          {
            iconPath: "../images/img2.jpg",
            id: 1,
            latitude: 23.090994,
            longitude: 113.524520,
            width: 50,
            height: 50
          },
          {
            iconPath: "../images/img3.jpg",
            id: 2,
            latitude: 23.091994,
            longitude: 113.424530,
            width: 50,
            height: 50
          }],
        includePoints: [{
          latitude: 23.099994,
          longitude: 113.324520
        },
        {
          latitude: 23.090994,
          longitude: 113.524520
        }],
        polyline: []
      },
      onLoad: function (options) {
    
      // 调用腾讯 地图IP定位接口查询骑手的当前位置、需要的参数是骑手的IP
        wx.request({
          url: 'http://ip-api.com/json',
          success: function (e) {
            console.log('ip地址：', e.data);
            var ip = e.data.query;
            wx.request({
              url: 'https://apis.map.qq.com/ws/location/v1/ip?ip='+ ip +'&key=U4RBZ-7R3KJ-LOKFT-KQV55-5JCVH-LWBIF',
              success: function (e) {
                // 骑手的经纬度
                console.log('经纬度数据：', e);
              }
            });
          }
        });
        wx.getLocation({
          success: (res) => {
            this.setData({
              latitude: 23.099994,
              longitude: 113.324520
            });
            var coors=[];
            wx.request({
              url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=' + this.data.markers[0].latitude + ',' + this.data.markers[0].longitude + '&to=' + this.data.markers[1].latitude + ',' + this.data.markers[1].longitude + '&output=json&callback=cb&key=PD5BZ-K2VRO-CPEWZ-SOBAC-4KCDT-KAFLF',
              success: (res) => {
                console.log("09876546789",res);
               coors = res.data.result.routes[0].polyline
                for (var i = 2; i < coors.length; i++) {
                  coors[i] = coors[i - 2] + coors[i] / 1000000
                }
                console.log(coors)
                //划线
                var b = [];
                for (var i = 0; i < coors.length; i = i + 2) {
                  b[i / 2] = {
                    latitude: coors[i],
                    longitude: coors[i + 1]
                  };
                  console.log(b[i / 2])
                }
                this.setData({
                  polyline: [{
                    points: b,
                    color: "#00ae20",
                    width: 14,
                    dottedLine: false
                  }],
                })
              }
            })
          }
        });
      },
      regionchange(e) {
        console.log(e.type)
      },
      markertap(e) {
        console.log(e.markerId)
      },
      controltap(e) {
        console.log(e.controlId)
      }
    })

app.json

{
      "pages":[
        "pages/index/index"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      },
      "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用测试~~~"
        }
      }
    }

主要是利用的腾讯地图的规划路径的接口，获取到经纬度的数组、在地图上全部标记出来链接成线。

腾讯地图接口地址：[https://lbs.qq.com/webservice\_v1/guide-road.html][https_lbs.qq.com_webservice_v1_guide-road.html]

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220226/53c5b57d380c493dace137a2a612fa37.png
[https_lbs.qq.com_webservice_v1_guide-road.html]: https://lbs.qq.com/webservice_v1/guide-road.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20220226/c9471fb341f94ecbb46d70ccad8e86f5.png