vue 集成高德地图进行批量标注和信息窗体展示

最新推荐文章于 2025-07-16 12:59:52 发布

演员赵诗绎

最新推荐文章于 2025-07-16 12:59:52 发布

阅读量8.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue 高德地图多点标注信息窗体点击

本文链接：https://blog.youkuaiyun.com/u013144287/article/details/84583950

本文档介绍了如何在Vue项目中集成高德地图进行批量标注和信息窗体展示。通过高德API，实现了地图上的多点标注，并且详细讲述了点击标注后信息窗体的展示。参考高德地图的示例，结合Vue，可以在地图上添加信息窗口并监听点击事件。文章提到了具体实现步骤，包括Vue中引入高德地图的配置以及关键方法getToliteList()的实现。

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

vue 集成高德地图进行批量标注和信息窗体展示

高德地图进行地理位置的标注和信息窗体展示是我们很常用的一个功能，其实高德api里面已经清楚的说明怎么用了，但是自己总结一下记录在自己的笔记里，也是有些许好处的。高德api 样列展示地址是：https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers,以及点击窗体监听事件https://lbs.amap.com/api/amap-ui/demos/amap-ui-simpleinfowindow/events，两个样列基本就实现了我们的功能，可以点击参考。

首先我们看一下所运行的效果如图所示：（图片稍后补上，因为现在接口地址已经变动，暂未部署服务器）

其次我们看一下实现思路：

一、vue引入原生高德地图

1、index.html里面加入,高德js一定要放在头部而不是尾部，否则就会报 “AMap is not defined”

<!-- 高德地图 -->

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=26bf121b06524b0657b09gkjklgjkeeb3990c"></script>

<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

2、build 的webpack.base.conf.js文件里面加入

externals: {
    AMap: 'AMap',
    AMapUI: 'AMapUI'
  }

3、引用高德地图界面加入以下内容即可以使用地图

最低0.47元/天解锁文章

200万优质内容无限畅学