指南:组件 | vue-amap
1、前往高德开放平台注册开发者账号,在控制台申请Key
2、安装vue-amap
npm install vue-amap --save
3、在main.js
中引入vue-amap
import VueAMap from 'vue-amap';
import { AMapManager } from "vue-amap";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'XXXXXXXX', //填写在高德开放平台获取的key
plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor'], //按需引用插件
uiVersion: '1.0.11' //高德ui组件库
v: '1.4.4' //高德sdk
});
4、应用amap地图组件(示例)
<template>
<div style="width: 500px;height: 500px;">
<el-amap vid="map_id" :amap-manager="amapManager" :zoom="zoom" :center="center" :events="events">
<el-amap-marker :position="center"></el-amap-marker>
</el-amap>
</div>
</template>
<script>
let amapManager = new VueAMap.AMapManager();
export default {
data() {
return {
amapManager,
zoom: 16,
center: [0, 0],
events: {
init(o) {
// 自定义地图样式:https://geohub.amap.com/mapstyle/index
o.setMapStyle(
"amap://styles/a5a3bd8b425f872adeb4803b07da3967"
);
},
},
};
};
};
</script>
高德地图JS API参考:JSAPI结合Vue使用-JSAPI与前端框架结合-教程-地图 JS API v2.0 | 高德地图API