简述
业务需求：新增导览页面，在地图图层上添加手绘图层并打点，实时定位当前位置，并计算当前位置与目标点之间的距离
引入高德及其UI组件就不赘述了
1.首先先实现定位，期间试过H5 navigator.geolocation.getCurrentPosition（position）{ }方法，很烦，一直得不到position的值，也不报错，所以只能放弃，试试高德的组件geolocation，直接上代码：
let mapObj =new AMap.Map('container', {
center: that.center,//地图默认展示的中心点
zoom:18,
});
let geolocation;
mapObj.plugin(['AMap.Geolocation','AMap.Marker'], function () { //注意我这里引入了两个组件Geolocation是定位，Marker是点标记
geolocation =new AMap.Geolocation({
enableHighAccuracy:true, // 是否使用高精度定位，默认:true
timeout:10000,// 超过10秒后停止定位，默认：无穷大
maximumAge:0,// 定位结果缓存0毫秒，默认：0
convert:false,// 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton:false,// 显示定位按钮，默认：true
buttonPosition:'LB',// 定位按钮停靠位置，默认：'LB'，左下角
buttonOffset:new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker:false,// 定位成功后在定位到的位置显示点标记，默认：true
showCircle:false,// 定位成功后用圆圈表示定位精度范围，默认：true
panToLocation:false,// 定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:false// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
mapObj.addControl(geolocation);
geolocation.getCurrentPosition(function(status,result){
if(status=='complete'){
console.log(result.position)//获取当前位置成功
}else{
console.log(result)//获取当前位置失败
}
}）
}）
2.计算当前位置与目标点之间的距离，我当时的业务需求是计算当前定位与目标点数组之间的距离，只多了个数组，上代码：
if(status=='complete'){
//得到当前位置经纬度
this.presentCenter = result.position //这里是把当前的位置信息赋值给presentCenter
//添加景点marker
for(let i in res.data){
markerTwo =new AMap.Marker({
position:[res.data[i].pointLongitude, res.data[i].pointLatitude],
offset:new AMap.Pixel(-10, -10),
});
var marPosition = markerTwo.getPosition(); // 这里是得到目标点的位置信息
var distance =Math.round(this.presentCenter.distance(marPosition)); //这里是两点进行计算，distance 为两点之间的距离
mapObj.add(markerTwo);
};
}
组件里的内容根据需求自定，各组件在高德地图官网有demo，可以直接粘进来用。
以上这篇在vue项目中实现高德地图实时定位，并计算当前定位与目标点之间的距离，就是我的全部内容了，作为记录