微信小程序地图计算两个点之间的距离
最近在做微信小程序,需要用到计算两个标注点之间的距离,简单代码示例如下:
<template> <view class="content"> <map id="maps" style="width: 100%; height: 700rpx;" :latitude="latitude" :longitude="longitude" :markers="markers" :circles="circles" @tap="handleClickMap"> </map> </view> </template> <script> export default { data() { return { current: 0, latitude: 25.081037, longitude: 102.73249, markers: [{ latitude: 25.081037,//纬度 longitude: 102.73249,//经度 }], circles:[{ //在地图上显示圆 , latitude: 25.081037, longitude: 102.73249, fillColor: "#9db0de6A", //填充颜色 color: "#00aaff", //描边的颜色 radius: 100, //半径 strokeWidth: 1 //描边的宽度 }] } }, mounted(){ let olds = { latitude: 25.081037, longitude: 102.73249 }; let news = { latitude:25.080271, longitude:102.731915, }; let num = 0; num = this.getDistance(olds.latitude,olds.longitude,news.latitude,news.longitude); console.log('距离:'+num); this.getLocation(); }, methods:{ // 获取位置 getLocation(){ let that = this; uni.getLocation({ type:'wgs84', success: (res) => { const latitude = res.latitude; // 经度 const longitude = res.longitude; // 纬度 console.log(latitude,longitude); }, fail:(res) => { uni.showToast({ icon:'none', title:'地址信息获取失败请打开GPRS权限' }); } }); }, // 点击标注 handleClickMap(e){ let that = this; let id = e.currentTarget.id; let maps = uni.createMapContext('maps', this).$getAppMap(); maps.onclick = function(point) { console.log(point); // point.iconPath = '/static/btn_loc0.png'; that.markers = that.markers.concat(point); uni.showToast({ title: '添加成功', icon: 'none' }); }; }, getDistance(latFrom, lngFrom, latTo, lngTo) { var EARTH_RADIUS = 6378136.49; function rad(d) { return d * Math.PI / 180.0; } var radLatFrom = rad(latFrom); var radLatTo = rad(latTo); var a = radLatFrom - radLatTo; var b = rad(lngFrom) - rad(lngTo); var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2))); distance = distance * EARTH_RADIUS; distance = Math.round(distance * 10000) / 10000; return parseFloat(distance.toFixed(0)); } } } </script> <style> </style>