VUE——vue-amap兼容原生SDK+使用官方UI

    由于业务需要,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
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值