vue使用高德地图
1.使用npm安装 Loader :
npm i @amap/amap-jsapi-loader --save
2.在template中添加标签作为容器
<template>
<div id="map"></div>
</template>
3.设置div的样式(根据个人觉得)
4.在组件中引入 amap-jsapi-loader
import AMapLoader from '@amap/amap-jsapi-loader';
5.在methods中初始化地图
methods:{
initMap(){
AMapLoader.load({
key:"",
version:"2.0",
plugins:[''],
}).then((AMap)=>{
this.map = new AMap.Map("map",{
viewMode:"3D",
zoom:5,
center:[105.602725,37.076636],
});
}).catch(e=>{
console.log(e);
})
},
},
6.在mounted中调用initMap方法渲染地图(需要在DOM 初始化完成后调用)
mounted(){
this.initMap();
}