在vue中使用高德地图(异步引入方式,不使用依赖)
1、创建一个AMap.js,路径:src/assets/AMap/AMap.js/** 异步创建script标签*/export default function MapLoader () {return new Promise((resolve, reject) => {if (window.AMap) {resolve(window.AM...
·
1、创建一个AMap.js
,路径:src/assets/AMap/AMap.js
/*
* 异步创建script标签
*/
export default function MapLoader () {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=高德申请的key'
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}
2、在任何.vue
文件中使用:
<template>
<div class="container">
<div class="maploader">
<div id="mymap" class="map"></div>
</div>
</div>
</template>
<script>
import MapLoader from '@/assets/AMap/AMap.js'
export default {
components: {
},
name: 'maploader',
data() {
return {
map: null
};
},
mounted () {
let that = this
MapLoader().then(AMap => {
console.log('地图加载成功')
that.map = new AMap.Map("mymap", {
resizeEnable: true,
center: [117.000923, 36.675807],
zoom: 11
});
}, e => {
console.log('地图加载失败' ,e)
})
},
};
</script>
<style lang="scss">
.map {
height:640px;
width:100%;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)