记录小程序之调用腾讯地图做路线描绘

最新推荐文章于 2024-01-30 09:35:04 发布

原创最新推荐文章于 2024-01-30 09:35:04 发布 · 1.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#js #小程序

本文详细介绍了如何在WXML中使用地图组件展示位置，并通过调用QQMapWX SDK实现路线规划，包括设置地图属性、显示标记和折线，以及解析路线坐标。

wxml文件：


<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" show-compass="true" show-location="true" show-scale="true" enable-rotate="true"
 markers="{{markers}}" polyline="{{polyline}}" bindregionchange="regionchange" show-location style='width:100%;height:90vh;'>
</map>
<view class="mapbox">
  <view class="box-title">考场地址:</view>
  <view class="box-desc">{{place}}</view>
</view>

wxss文件：

.mapbox{
  width: 480rpx;
}
.box-title{
  margin-left: 180rpx;
  font-size: 17px;
}
.box-desc{
  font-size: 15px;
  color: darkgray;
}

js文件：

// 引入SDK核心类
import QQMapWX from 'qqmap-wx-jssdk.min.js';
let qqMap = new QQMapWX({
    key: ''
});
Page({
  data: {
    ployline: [],
    lng: 0,
    lat: 0
  },

  onLoad: function (options) {
    this.data.lng = options.lng;
    this.data.lat = options.lat;
    console.log("这里是onload",this.data.lat,this.data.lng,options.place);
    this.setData({
      place:options.place
    })
    this.routeMap(this.data.lat,this.data.lng);
  },

  routeMap(latitude,longitude){
    let that = this;
    console.log("这里是routemap:",latitude,longitude);
    qqMap.direction({
      mode: 'driving',
      to: {latitude,longitude},
      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;
        }
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log(pl)
        that.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          markers:[{
            iconPath:"../images/icon_location.png",
            id:0,
            longitude: longitude,
            latitude: latitude,
            width: 30,
            height: 30,
          }],
          polyline: [{
            points: pl,
            color: "#20B2AA", 
            width: 4, 
            dottedLine: false
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  }
})