vue高德地图（二）：获取并标记用户位置

官方实例

方法示例

新增方法

在第一篇的基础上新增该功能this.getLocation()

 var map
 ...
export default {
	methods() {
		initMap() {
			    AMapLoader.load({
			        key: "7a3da7cec5d4eebc34d815817d406904",             // 申请好的Web端开发者Key，首次调用 load 时必填
			        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			        plugins: ['AMap.Scale'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			    }).then((AMap) => {
			        this.map = new AMap.Map("container", {  //设置地图容器id
			            viewMode: "3D",    //是否为3D地图模式
			            zoom: 13,           //初始化地图级别
			            center: [105.602725, 37.076636], //初始化地图中心点位置
			            resizeEnable: true
			        });
			        //>>>>>>>>>本篇新增：获取用户当前定位
			        this.getLocation()
			        //<<<<<<<<<<<
			    }).catch(e => {
			        console.log(e);
			    })
			},
			
			 // 获取用户当前定位
			getLocation() {
			    let that = this;
			    map = new AMap.Map("container", {
			        resizeEnable: true
			    });
			
			    AMap.plugin('AMap.Geolocation', function () {
			        let geolocation = new AMap.Geolocation({
			            enableHighAccuracy: true,//是否使用高精度定位，默认:true
			            timeout: 10000,          //超过10秒后停止定位，默认：5s
			            buttonPosition: 'RB',    //定位按钮的停靠位置
			            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
			            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
			        })
			        
			        //这一步很关键，否则定位的按钮不会出现
			        map.addControl(geolocation)
			        
			        //需要在vue.config.js里开启https访问方式
			        geolocation.getCurrentPosition(function (status, result) {
			            console.log(status)
			            if (status == 'complete') {
			                console.log(status)
			                onComplete(result)
			            } else {
			                onError(result)
			            }
			        });
			
			        function onComplete(data) {
			            // data是具体的定位信息
			            console.log('成功', data)
			            var str = []
			            str.push('定位结果：' + data.position)
			            str.push('定位类别：' + data.location_type)
			            if (data.accuracy) {
			                str.push('精度：' + data.accuracy + ' 米')
			            }
			            //如为IP精确定位结果则没有精度信息
			            str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'))
			            console.log('str', str)
			        }
			        
			        function onError(data) {
			            // 定位出错
			            console.log('失败', data)
			        }
			    })
			},	
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

配置https访问

配置vue.config.js文件。不配这个不影响Localhost方式访问，但不能用ip:port方式进行访问。

module.exports = {
    devServer: {
        https: true
		...
    },
}
1
2
3
4
5
6

记得重启项目！

另外注意自己的浏览器定位是否正常。可以通过访问官方实例进行查看，如果在官方网站里直接定位失败，就先解决浏览器定位的问题。（比如我的在chrome定位失败，edge定位成功，但也有偏移量，偏的还挺多的。这个列个todo回头再说吧）