一、开通腾讯位置服务

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

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

在我的应用中找到在你用的小程序下的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 文件

初始化

  //全局定义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.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}]})}})},

距离计算

  distanceCalculation(){var self =thislet fromLocation=this.data.startLatitude+','+this.data.startLongitudelet toLocation=this.data.endLatitude+','+this.data.endLongitudewx.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'})   }})},

获取救护车位置

 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。

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

微信小程序点击按钮弹出弹窗_转载 | 广东大学生就业创业微信小程序操作流程详解（一）...
广东大学生就业创业微信小程序操作流程详解(一) 转眼来到10月,炎炎夏日也阻挡不了青春的忙碌,同学萌走出校园,迈向社会. 在这段时间,同学们不仅要准备毕业论文,应对毕业答辩,还需要兼顾各种毕业手续的 ...
微信小程序python flask_Python Flask 搭建微信小程序后台详解
前言: 近期需要开发一个打分的微信小程序,涉及到与后台服务器的数据交互,因为业务逻辑相对简单,故选择Python的轻量化web框架Flask来搭建后台程序.因为是初次接触小程序,经过一番摸索和尝试,个 ...
uniapp-微信小程序分包--详解
uniapp-微信小程序分包–详解实际环境(用business举例,可以创建很多个分包) 先说好,如果代码模块多,就一个一个模块搞(照着做不会错) 直入主题,我代码写完了,一真机运行,g,发现超过 ...
微信小程序版本管理详解
本来觉得没必要写版本管理的文章. 奈何微信的官方文档真的是太不友好了!!! 一顿操作猛如虎.(请原谅我知识轻薄). 本文只是我这几天操作过的,一些个人理解总结,如果,有什么不对的,欢迎大家纠正我的错误 ...
黑马优购小程序项目详解
黑马优购小程序项目详解 1.准备工作先把wx.request封装好.然后配置路由.把底部的导航配置出来.就是我们的首页.分类.购物车.还有我的,在全局的app.json中配置. {"pag ...
微信小程序 - 接入腾讯地图 SDK 及详细使用教程，结合小程序 mpa 地图组件展示腾讯地图（基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆地址解析 / 坐标系的转化）
介绍网上的教程都太乱了,代码根本没办法拿到自己的项目中去. 本文实现了微信小程序中接入使用腾讯地图插件详细教程,并提供了基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆 ...
flask ajax小程序,Python Flask 搭建微信小程序后台详解
后台程序返回了数据后,第三步就是小程序该怎么接收返回数据并进行相关业务逻辑处理. 小程序接收返回数据.Python-Flask向小程序返回了JSON格式的数据后,小程序的wx.requset()函数里 ...
Python Flask 搭建微信小程序后台详解
前言: 近期需要开发一个打分的微信小程序,涉及到与后台服务器的数据交互,因为业务逻辑相对简单,故选择Python的轻量化web框架Flask来搭建后台程序.因为是初次接触小程序,经过一番摸索和尝试,个 ...
字节跳动小程序支付详解
微信支付详解 1.为什么要写这篇文章参考了字节跳动官方的文档之后发现写的太简单,完全一头雾水摸不清头脑,后来在百度了别人的实现方案,才得以总结出来. 2.背景我司要开发一个头条小程序,需要支持支付 ...

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

一、开通腾讯位置服务

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

三、配置合法域名

四、代码详解

1.wxml 文件

1.wxss 文件

3.js 文件

预览

总结

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

最新文章

热门文章

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

一、开通腾讯位置服务

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

三、配置合法域名

四、代码详解

1.wxml 文件

1.wxss 文件

3.js 文件

预览

总结

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

最新文章

热门文章

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

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