简述

业务需求：新增导览页面，在地图图层上添加手绘图层并打点，实时定位当前位置，并计算当前位置与目标点之间的距离

引入高德及其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项目中实现高德地图实时定位，并计算当前定位与目标点之间的距离，就是我的全部内容了，作为记录