安装vue-amap
npm i vue-amap --save
在main.js 中引入高德地图(注意:高德地图的key需要自己去官网申请)
VueAMap.initAMapApiLoader({
key: 'e1dedc6bdd765d46693986ff7ff969f4',
plugin: [
'AMap.Autocomplete',
'AMap.PlaceSearch',
'AMap.Scale',
'AMap.OverView',
'AMap.ToolBar',
'AMap.MapType',
'AMap.PolyEditor',
'AMap.CircleEditor'
],
uiVersion: '1.0', // ui库版本,不配置不加载,
v: '1.4.4'
});
在你需要引入高德地图的页面写入:
import { lazyAMapApiLoaderInstance } from "vue-amap";
创建一个地图容器:
<div id="amapContainer" ></div>
记得要给这个容器宽高😂 我之前就是忽略了 找了好久的原因才发现没给宽高
<style scoped>
#amapContainer{
width:500px;
height:500px;
}
</style&g