(一)安装
npm install vue-amap --save
(二)main.js引入并初始化
// 引入vue-amap
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: 'YOUR_KEY',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 高德 sdk 版本,默认为 1.4.4
v: '1.4.4'
});
(三)注册申请key
https://console.amap.com/dev/key/app
创建新应用
选择Web端(JS API)
(四)使用
<template>
<div class="amap-page-container">
<el-amap vid="amapDemo"
:amap-manager="amapManager"
:events="mapEvents"
class="amap-demo">
</el-amap>
</div>
</template>
<script>
import VueAMap from 'vue-amap'
let amapManager = new VueAMap.AMapManager()
export default {
name: 'map',
data () {
return {
amapManager,
mapEvents: {
init (o) {
o.setMapStyle('amap://styles/edbc379c8110f081c564f98d8c59f80c');//自定义的高德地图的样式
}
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style scoped>
.amap-demo {
height: 500px;
}
</style>