第一步:安装依赖
npm install vue-amap --save
第二步:在main.js中
import AMap from "vue-amap";
Vue.use(AMap);
AMap.initAMapApiLoader({
key: "开发者申请的key",
plugin: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType"],
uiVersion: "1.0.11", // ui库版本,不配置不加载,
v: "1.4.4"
});
第三步:在demo.vue中使用
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:center="center"
:zoom="zoom"
:plugin="plugin"
:events="events"
class="amap-demo">
</el-amap>
import AMap from "vue-amap";
import { AMapManager } from "vue-amap";
let amapManager = new AMap.AMapManager();
data(){
return{
amapManager,
zoom: 12,
center: [121.59996, 31.197646],
events: {
init: o => {
console.log(o.getCenter());
// console.log(this.$refs.map.$$getInstance());
o.getCity(result => {
console.log(result);
});
},
moveend: () => {},
zoomchange: () => {},
click: e => {
console.log("map clicked");
}
},
plugin: [
"ToolBar",
{
pName: "MapType",
defaultType: 0,
events: {
init(o) {
console.log(o);
}
}
}
],
}
}
⚠️注意: