vue amap（高德地图）

最新推荐文章于 2024-04-12 18:30:52 发布

weixin_40624809

最新推荐文章于 2024-04-12 18:30:52 发布

阅读量830

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_40624809/article/details/122458388

本文介绍了如何在Vue项目中集成高德地图，通过安装依赖、配置HTML和JavaScript部分，实现自定义信息窗口功能。在事件监听时需要注意大小写问题，并解决多次关闭信息窗体后失效的bug。

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

本文示例参照官方文档自定义信息窗口

效果：
在这里插入图片描述

安装依赖

npm i vue-amap
index.html添加

 <script src="//webapi.amap.com/maps?v=2.0&key=自己注册的KEY"></script>
  <!--引入UI组件库（1.1版本） -->
  <script src="//webapi.amap.com/ui/1.1/main.js"></script>

HTML部分

<div id="container"></div>

JS部分

监听事件的时候用的大写Event,官方示例是小写的

 AMap.Event.addListener(marker, 'click', function () {
   
   
    _this.infoWindow.open(this.map, marker.getPosition())
  })

关闭信息窗体时，官方用的map.clearInfoWindow()（map的方法），但是关闭一次后，再次关闭会失效，就换成infoWindow.close()（窗体的方法）

完整部分

<script>
import {
   
    reactive, ref } from 'vue'

最低0.47元/天解锁文章

200万优质内容无限畅学