1、获取key
我们需要到高德开放平台生成key
我这里选的是web端，提交后会生成一个key值
2、安装vue-amap
npm install vue-amap --save
3、在项目main.js引入vue-amap
1 import AMap from 'vue-amap';
2 Vue.use(AMap);
3
4 // 初始化vue-amap
5 AMap.initAMapApiLoader({
6 // 高德key
7 key: '放入你的key',
8 // 插件集合 （插件按需引入）
8 plugin: ['AMap.Geolocation']
10 //AMap.Geolocation定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种 手段，提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。
11 });
3.使用
<template><div class="box"><div :style="{width:'100%',height:'300px'}"><el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"></el-amap></div></div>
</template><script>
export default {data(){const self = this;return {center: [121.59996, 31.197646],lng: 0,lat: 0,loaded: false,plugin: [{enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 100, //超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：truebuttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：fextensions:'all',pName: 'Geolocation',events: {init(o) {// o 是高德地图定位插件实例o.getCurrentPosition((status, result) => {console.log(result)if (result && result.position) {self.lng = result.position.lng;self.lat = result.position.lat;self.center = [self.lng, self.lat];self.loaded = true;self.$nextTick();}});}}}]}}
}
</script>
以上就是高德地图的简单使用
————————————————
版权声明：本文为CSDN博主「jlinbk」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jlinbk/article/details/118335607
