美文网首页微信小程序开发
微信小程序使用腾讯地图—路线规划

微信小程序使用腾讯地图—路线规划

作者: 刘昊然的弟弟 | 来源:发表于2021-04-21 11:22 被阅读0次

    想要使用腾讯地图,首先要在腾讯地图开发平台先注册账号,申请key腾讯地图开放平台,具体的申请流程不详述了,有需要的自行百度,重点讲一下使用微信小程序原生组件map,配合腾讯地图的一些api来实现路线规划功能。
    重点:需要自己去看原生map组件的一些属性和方法。
    效果图如下:

    效果图.png
    // html部分
    <map id="map" 
        name="citymap" 
        longitude="{{longitude}}" 
        latitude="{{latitude}}" 
        polyline="{{polyline}}" 
        markers="{{markers}}" 
        circles="{{circles}}"
        scale="15" 
        subkey="SSSBZ-SQZK6-U3XSL-EPA5P-6VNK6-ANF4P" 
        show-location
        show-compass
        enable-rotate 
        style="width: 750rpx; height: 700rpx;">
    </map>
    

    js代码

    var coors;
    Page({
      data: {
        polyline: [],
        markers: [{
            latitude: 23.362490,
            longitude: 116.715790,
            iconPath:'../../assets/images/icon_start.png',width:48,height:48,
            anchor:{x:0.4,y:0.5}
          },
          {
            latitude: 23.37228,
            longitude: 116.75498,
            iconPath:'../../assets/images/icon_end.png',width:48,height:48,
            anchor:{x:0.45,y:0.5}
          }
        ],
        longitude: '116.715790',
        latitude: '23.362490'
    
      },
      onLoad: function (options) {
        wx.request({
          url: 'https://apis.map.qq.com/ws/direction/v1/bicycling/?from=23.362490,116.715790&to=23.37228,116.75498&output=json&callback=cb&key=' + 'SSSBZ-SQZK6-U3XSL-EPA5P-6VNK6-ANF4P',
          success: function (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: "#5996FF",  //线的颜色
                width: 4,
                dottedLine: false,
              }]
            })
          }
        })
      },
    });
    

    相关文章

      网友评论

        本文标题:微信小程序使用腾讯地图—路线规划

        本文链接:https://www.haomeiwen.com/subject/vjmalltx.html