由于业务需要，vue-amap提供的组件不够实现部分业务，需要使用高德原生SDK来定制化。对于vue-amap，都有init事件，参数为高德的实例，因此可以自由的将原生SDK和vue-amap结合使用
对于el-map组件，支持一个amap-manage属性，通过这个属性可以再任何地方获取高德原生Amap.Map实例
记录两个简单案例，以便后续查阅
使用官方UI，通过原生的方法增加circle 以及信息窗体。
最终效果图下3张图
页面初始的时候 地图生成后，使用官方UI生成marker，点击增加circle按钮 会以marker为中心绘制一定半径的圆形区域，点击更改range按钮，增加圆形区域半径，点击信息窗体按钮 绘制信息窗口
组件部分：
<template>
<div class="amap-page-container">
<el-amap vid="amapDemo"
:center="center"
:amap-manager="amapManager"
:zoom="zoom"
:events="events"
class="amap-demo">
</el-amap>
<div class="toolbar">
<button @click="addCircle()">增加 circle</button>
<button @click="changeRadius()">更改 range</button>
<button @click="addInfoWindow()">信息窗体</button>
</div>
</div>
</template>
注：要对el-map组件给定宽高的样式，否则刷新页面可能会有白屏的情况。
<style scoped>
.amap-page-container {
width: 100%;
height: 300px;
}
</style>
JS部分：
<script>
import {AMapManager} from "vue-amap"
let amapManager=new AMapManager();
export default{
data () {
return {
zoom: 16,
center: [121.329402,31.228667],
amapManager,
events: {
init(o) {
AMapUI.loadUI(['overlay/SimpleMarker'],function(SimpleMarker){
const marker=new SimpleMarker({
iconLabel: {
innerHTML: '<i>mm</i>', //设置文字内容
style: {
color: '#fff' //设置文字颜色
}
},
iconStyle: 'green',
map: o,
position: o.getCenter()
})
//marker.setMap(o);
})
}
},
radius:100,
currentCircle:null
}
},
methods:{
addCircle(){
let map=amapManager.getMap();
let circle=new AMap.CircleMarker({
center: [121.329402,31.228667],
radius:this.radius,
strokeColor:'#38f',
strokeOpacity:'0.8',
strokeWeight:1,
fillColor:'#38f',
fillOpacity:'0.2'
//map:map //写法一
})
circle.setMap(map);//写法二
this.currentCircle=circle;
},
changeRadius(){
this.radius+=10;
this.currentCircle.setRadius(this.radius);
},
addInfoWindow(){
let map=amapManager.getMap();
AMapUI.loadUI(['overlay/SimpleInfoWindow'],function(SimpleInfoWindow){
var infoWindow = new SimpleInfoWindow({
infoTitle: '<strong>这里是标题</strong>',
infoBody: '<p>这里是内容。</p>'
});
infoWindow.open(map, map.getCenter());
})
}
}
};
</script>
注：绘制marker或者circle有两种写法，以marker为例，circle同理
第一种，直接在配置中指定在哪个map实例上绘制
const marker=new SimpleMarker({
iconLabel: {
innerHTML: '<i>mm</i>', //设置文字内容
style: {
color: '#fff' //设置文字颜色
}
},
iconStyle: 'green',
map: o,
position: o.getCenter()
})
第二种，配置好marker ，通过setMap方法进行绘制
const marker=new SimpleMarker({
iconLabel: {
innerHTML: '<i>mm</i>', //设置文字内容
style: {
color: '#fff' //设置文字颜色
}
},
iconStyle: 'green',
position: o.getCenter()
})
marker.setMap(o);
marker、circle或其他要绘制的覆盖物具体配置请查阅高德地图参考手册：点击打开链接
来源：CSDN
作者：kindCoder
链接：https://blog.csdn.net/qq_36111804/article/details/80858469