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

最新推荐文章于 2025-03-21 09:32:30 发布

kindCoder

最新推荐文章于 2025-03-21 09:32:30 发布

阅读量1.1w

点赞数 2

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/qq_36111804/article/details/80858469

版权

本文介绍了如何在Vue项目中使用vue-amap组件，通过`amap-manage`属性获取高德原生地图实例，并结合官方UI创建marker、circle和信息窗体。在页面初始化时，地图加载后，可以通过按钮操作增加circle并改变其半径，同时展示信息窗口。注意需要为`el-map`组件设置固定宽度和高度以防止白屏问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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