由于业务需要,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-ama