一、开通腾讯位置服务
在微信公众平台开通腾讯位置服务
二、用开发者权限登录腾讯位置服务
在我的应用中找到在你用的小程序下的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>
更多属性详见：小程序开发文档-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 文件
初始化//全局定义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']},
获取当前位置为标记起点
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,});}});},
根据当前位置获取距离最近的医院位置
//根据当前位置获取距离最近的医院位置getHospitalPromoteUrl(latitude,longitude){var self=thiswx.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})}})},
添加标记点和去重的方法
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)},
点击标记起点和终点
//标记起点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()},
轨迹划线（由于需求原因，我们需要把救护车的位置也显示出来，实时监控救护车的位置，所以在这里用到了waypoints属性）
路线规划的更多属性和方法详见：腾讯位置信息Api-小程序
//轨迹划线drawRoad(){let fromLocation=this.data.startLatitude+','+this.data.startLongitudelet toLocation=this.data.endLatitude+','+this.data.endLongitudelet waypoints=this.data.amLatitude+','+this.data.amLongitude//途径点var self=thisself.pushMarkers(self.data.amLatitude,self.data.amLongitude,2,self.data.icon[1])console.log(fromLocation,toLocation)wx.request({url: 'https://apis./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}]})}})},
距离计算
distanceCalculation(){var self =thislet fromLocation=this.data.startLatitude+','+this.data.startLongitudelet toLocation=this.data.endLatitude+','+this.data.endLongitudewx.request({url: 'https://apis./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'}) }})},
获取救护车位置
getAmbulanceLocation(){var self =thiswx.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。
