使用vue-amap地图开发的时候,刷新页面地图就不显示了。因为刷新的时候AMapUI没有加载出来导致地图显示空白。
使用remoteLoad 来解决
// remoteLoad.js
export default function remoteLoad(url, hasCallback) {
return createScript(url)
/**
* 创建script
* @param url
* @returns {Promise}
*/
function createScript(url) {
var scriptElement = document.createElement('script')
document.body.appendChild(scriptElement)
var promise = new Promise((resolve, reject) => {
scriptElement.addEventListener('load', e => {
removeScript(scriptElement)
if (!hasCallback) {
resolve(e)
}
}, false)
scriptElement.addEventListener('error', e => {
removeScript(scriptElement)
reject(e)
}, false)
if (hasCallback) {
window.____callback____ = function() {
resolve()
window.____callback____ = null
}
}
})
if (hasCallback) {
url += '&callback=____callback____'
}
scriptElement.src = url
return promise
}
/**
* 移除script标签
* @param scriptElement script dom
*/
function removeScript(scriptElement) {
document.body.removeChild(scriptElement)
}
}
<template>
<div class="container">
<el-amap :amap-manager="amapManager" :events="events" :center="center" :zoom="zoom" :plugin="plugin" />
</div>
</template>
<script>
import remoteLoad from '@/utils/remoteload.js'
import {
AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager() // 新建生成地图画布
export default {
data() {
const self = this
return {
map: null,
amapManager,
marker: null,
events: {
init(o) {
lazyAMapApiLoaderInstance.load().then(() => {
self.initMap()
})
},
},
center: [121.472644, 31.231706],
zoom: 4,
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geocoder', 'AMap.Geolocation', 'AMap.InfoWindow'],
}
},
created() {
// 已载入高德地图API,则直接初始化地图
if (window.AMap && window.AMapUI) {
this.initMap()
// 未载入高德地图API,则先载入API再初始化
} else {
// 载入高德地图和UI组件
// eslint-disable-next-line no-undef
Promise.all([remoteLoad(`http://webapi.amap.com/maps?v=1.4.17&key=[你的高德地图key]`), remoteLoad('http://webapi.amap.com/ui/1.0/main.js')]).then(() => {
this.initMap()
})
}
},
mounted() {
},
methods: {
// 初始化地图
initMap() {
const map = amapManager.getMap()
this.map = map
},
},
}
</script>