vue异步加载amap高德地图,解决刷新浏览器地图不显示问题
<template>
<Row id="amap" style="width: 100%; height: 100%; margin-top: -40px;"></Row>
</template>
<script>
import MapLoader from '@/libs/amap'
let AMap
......
......
......
methods: {
createAmap () {
map = new AMap.Map('amap', {
resizeEnable: true,
zoom: 10, // 设置地图显示的缩放级别
center: this.center, // 设置地图中心点坐标
viewMode: '2D', // 设置地图模式
// 地图模式
lang: 'zh_cn' // 设置地图语言类型
})
let scale = new AMap.Scale({ // 比例尺
visible: true
})
let toolBar = new AMap.ToolBar({ // 工具条
visible: true
})
map.addControl(scale)
map.addControl(toolBar)
// 浏览器精确定位
AMap.plugin('', function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, // 显示定位按钮，默认：true
buttonPosition: 'RB', // 定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: false // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
})
map.addControl(geolocation)
geolocation.getCurrentPosition(function (status, result) {
let position = result.position
if (status === 'complete') {
console.log('定位成功：定位结果 = %o', [position.lng, position.lat])
} else {
console.log('定位失败')
}
})
})
}
}
mounted () {
// 初始化地图对象，加载地图
MapLoader().then(aMap => {
console.log('%地图异步加载成功%')
AMap = aMap
setTimeout(() => {
this.request()
this.createAmap()
}, 500)
})
}
</script>