由于业务需要，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或其他要绘制的覆盖物具体配置请查阅高德地图参考手册：点击打开链接