1.首先在src下面创建plugins文件夹,再创建amap.js文件,里面内容
/*
* 异步创建script标签
*/
export default function MapLoader() {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您自己的key&callback=onLoad';
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onerror = reject;
document.head.appendChild(script)
}
window.onLoad = () => {
resolve(window.AMap)
}
})
}
2.然后在你的任何组件里这样使用
<script>
import MapLoader from '@/plugins/amap.js'
export default {
name: 'bigData',
data() {
return {
map: null
}
},
mounted() {
let that = this
MapLoader().then(AMap => {
console.log('地图加载成功')
that.map = new AMap.Map("container", {
resizeEnable: true,
mapStyle: 'amap://styles/您自己的自定义样式', //设置地图的显示样式
});
}, e => {
console.log('地图加载失败', e)
})
}
}
</script>