小程序原生 详解实现腾讯地图标点和路线规划和距离计算

一、开通腾讯位置服务

在微信公众平台开通腾讯位置服务

二、用开发者权限登录腾讯位置服务

在我的应用中找到在你用的小程序下的key

三、配置合法域名

在开发管理中配置腾讯位置信息的合理域名

四、代码详解

1.wxml 文件

<view class="container">
  <!-- 地图 -->
  <map class='map' enable-3D="true" longitude='{{startLongitude}}' latitude='{{startLatitude}}' scale='14' 
    show-compass="true" 
    enable-traffic="true" 
    show-location="true" 
    polyline="{{polyline}}"
    markers="{{covers}}"></map>
  <view style="position: absolute;width: 100%;top: 68%;left: 20rpx; color:pink;">距离:{{distance}}</view>
  <view class="sos-status">
      <button style="background-color:red;color:#ffffff"  bindtap="drawStart">标记起点</button>
      <button style="background-color:blue;color:#ffffff"  bindtap="drawEnd">标记终点</button>
      <button style="background-color:yellow;color:#ffffff"  bindtap="drawRoad">轨迹划线</button>
  </view>
</view>

属性	说明
enable-3D	展示3D楼块
longitude	中心经度
show-compass	显示指南针
enable-traffic	是否开启实时路况
show-location	显示带有方向的当前定位点
markers	标记点
polyline	路线

更多属性详见：小程序开发文档-map组件

1.wxss 文件

.container {
  position: relative;
  height: 100%;
  width: 100%;
}
.sos-status {
  /* display: none; */
  position: absolute;
  height: 300rpx;
  width: 96%;
  overflow: hidden;
  /* position: fixed; */
  bottom: 1%;
  left: 2%;
  z-index: 10;
  border-radius: 20rpx;
  background: #ffffff;
  padding-top: 20rpx;
  box-shadow: 3rpx -3rpx 20rpx #c7c7c7;
  font-family: SourceHanSansSC-bold;
}
.map {
  height: 100vh;
  width: 100%;
}

3.js 文件

1. 初始化

  //全局定义
  var marsks=[]
  data: {
    covers:[],
    polyline:[],
    startLatitude:0,
    endLatitude:0,
    startLongitude:0,
    endLongitude:0,
    amLatitude:0,
    amLongitude:0,
    distance:0,
    icon:[
      '/images/end.png',
      '/images/ambulance.png'
    ]
  },

2. 获取当前位置为标记起点

onLoad: function (options) {
    this.getLocation()
    this.getAmbulanceLocation()
},
getLocation(){
    var self = this
    // 获取当前的地理位置
    wx.getLocation({
      type: 'gcj02', 
      success: (res) => {
        console.log(res)
        //赋值经纬度
        var currentLatitude = res.latitude; //纬度
        var currentLongitude =res.longitude; //经度
        self.setData({
          startLatitude: currentLatitude,
          startLongitude:currentLongitude,
        });
      }
    });
},

3. 根据当前位置获取距离最近的医院位置

//根据当前位置获取距离最近的医院位置
getHospitalPromoteUrl(latitude,longitude){
    var self=this
    wx.request({
      url: 'https://xxxxxxxxx/consumer/depts/hospitals',//测试地址，并非真是地址
      method: "GET",
      data: {
        latitude: latitude,
        longitude:longitude,
      },
      header: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
      success: (res) => {
        console.log(res)
        if(res.data.success==false || res.data.data.length==0){
          return
        }
        self.setData({
         endLatitude:res.data.data[0].latitude,
         endLongitude:res.data.data[0].longitude
       })
      }
    })
  },

4. 添加标记点和去重的方法

  pushMarkers(latitude,longitude,id,icon){
    var markers=
      {
        id:id,
        latitude:  latitude,
        longitude: longitude,
        width: "60rpx",
        height: "60rpx",
        iconPath: icon
      }
     marsks.push(markers)
     this.removeRepeat(marsks)
     this.setData({
        covers:marsks
     })
  },
  //去除重复的标记点
  removeRepeat(marsks){
       for(var i=0;i<marsks.length;i++){
         for(var j=i+1;j<marsks.length;j++)
         if(marsks[i].id==marsks[j].id){
            marsks.splice(j,1)
            j--;
         }
       }
       console.log(marsks)
  },

5. 点击标记起点和终点

  //标记起点
  drawStart(){
      this.pushMarkers(this.data.startLatitude,this.data.startLongitude,0,this.data.icon[0])
      this.getHospitalPromoteUrl(this.data.startLatitude,this.data.startLongitude)
  },
  //标记终点
  drawEnd(){
     this.pushMarkers(this.data.endLatitude,this.data.endLongitude,1,this.data.icon[0])
     this.distanceCalculation()
  },

6. 轨迹划线（由于需求原因，我们需要把救护车的位置也显示出来，实时监控救护车的位置，所以在这里用到了waypoints属性）
   
   路线规划的更多属性和方法详见：腾讯位置信息Api-小程序

  //轨迹划线
  drawRoad(){
    let fromLocation=this.data.startLatitude+','+this.data.startLongitude
    let toLocation=this.data.endLatitude+','+this.data.endLongitude
    let waypoints=this.data.amLatitude+','+this.data.amLongitude//途径点
    var self=this
    self.pushMarkers(self.data.amLatitude,self.data.amLongitude,2,self.data.icon[1])
    console.log(fromLocation,toLocation)
    wx.request({
      url: 'https://apis.map.qq.com/ws/direction/v1/driving/',
      data: {
        from: fromLocation,
        to: toLocation,
        waypoints: waypoints,
        key: 'xxxxxxxxxxxxxxxxxxxxxxx'//腾讯位置服务里面给的key值
      },
      method: 'GET',
      success: function(r) {
        console.log('获取到轨迹信息', r.data.result);
        // console.log(wayPoints);
        let coors = r.data.result.routes[0].polyline;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = coors[i - 2] + coors[i] / 1000000;
        }
        var b = [];
        for (var i = 0; i < coors.length; i = i + 2) {
          b[i / 2] = {
            latitude: coors[i],
            longitude: coors[i + 1]
          };
        }
        let passedPoint = [];
        for (i = 0; i < coors.length; i += 2) {
          let lat = coors[i];
          let lng = coors[i + 1];
          passedPoint.push({
            latitude: lat,
            longitude: lng
          });
          if (Math.abs(lat - self.data.covers[2].latitude) < 0.0005 && Math.abs(lng -       self.data.covers[2].longitude) < 0.0005) {
            break;
           }
        }
        self.setData({
          polyline:[
            {
              points: b,
              color: '#41965b',
              width: 6,
              arrowLine: true
            }, {
              points: passedPoint,
              color: '#green',
              width: 6,
              arrowLine: true
            }
          ]
        })
      }
    })
  },

7. 距离计算

  distanceCalculation(){
    var self =this
    let fromLocation=this.data.startLatitude+','+this.data.startLongitude
    let toLocation=this.data.endLatitude+','+this.data.endLongitude
    wx.request({
      url: 'https://apis.map.qq.com/ws/distance/v1/matrix',
      data: {
        mode: 'driving',
        from: fromLocation,
        to: toLocation,
        key: 'xxxxxxxxxxxxxxxxxxxxxxx'//腾讯位置服务里面给的key值
      },
      method: 'GET',
      success: function(res) {
        self.setData({
          distance:res.data.result.rows[0].elements[0].distance/1000+'km'
        })   
      }
    })
  },

8. 获取救护车位置

 getAmbulanceLocation(){
    var self =this
    wx.request({
      url: 'xxxxxxxxxxxxx',
      data:{
        taskId:'794387945590784',
        userId:'785091528691713'
      },
      method: 'POST',
			header: {
		     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
      success: res => {
        console.log(res.data.data)
        if (res.data.success == false) {
          wx.showToast({
            title: '获取救护车位置失败',
            duration: 2000
          });
        } else {
            self.setData({
              amLatitude:res.data.data.latitude,
              amLongitude:res.data.data.longitude
            })

        }
    }
  })
  },

预览

总结

有时候我们会憧憬。然后发现有人单身，有人结婚，有人为工作烦恼，有人为学业忙碌，有人…… 属于我们的那个蓝天早已消失不见。看着窗外的天，突然就黑了，感觉像我们的青春，突然就没了。
But
I have always been with you。