vue：引入高德地图

Posted 2020-11-12 llqwm

vue引用高德地图
1：安装高德依赖包
npm install vue-amap --s
2：在build/webpack.base.conf.js 加入如下配置（大概80行）
externals: {
‘AMap‘: ‘AMap‘,
‘AMapUI‘: ‘AMapUI‘
}
3：在index.html中加入如下引用
<!--引入高德地图JSAPI -->
<script src="//webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<!--引入UI组件库（1.0版本） -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
4：在script中引入如下组件，如果第二步不配置，这里会报错
import AMap from ‘AMap‘
import AMapUI from ‘AMapUI‘
5：template中加入map的div,注意如果map不显示，没报错的时候，请检查div的宽高。
<div id="map-container"> </div>
6：创建地图
<!--创建地图 -->
let mapObj = new AMap.Map(‘map-container‘, {
center: [117.000923, 36.675807],
zoom: 6
})
7：使用高德地图定位
mapObj.plugin([‘AMap.Geolocation‘], function () {
let geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, // 显示定位按钮，默认：true
buttonPosition: ‘LB‘, // 定位按钮停靠位置，默认：‘LB‘，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
})
mapObj.addControl(geolocation)
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, ‘complete‘, (result) => {
mapObj.setCenter(result.position)
}) // 返回定位信息
AMap.event.addListener(geolocation, ‘error‘, (result) => {
console.log(result)
}) // 返回定位出错信息
})