vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件

目录

一、需求 

二、引入高德地图

2.1、将高德地图引入到项目中

2.2、查看官网快速上手，熟悉高德地图的主要API 

2.3、海量点标注要用到的API文档

2.4、全部代码

 其他：

---

一、需求 

        因为不知道具体会有多少个点，那就直接以海量点安排，海量点也是有限制的，建议在 30000 点内。

文档：标注和标注图层-海量点-海量点标记-示例中心-JS API 2.0 示例 | 高德地图API

         需求：后台给多个经纬度，都要在地图上显示成标注点，且根据 online 的值，online=0 时标注点为灰色点，online=1为红色点。点击标注点有内容弹框，弹框中绑定点击事件，点击 “查看详情” 可以进行跳转。实现如下图：

二、引入高德地图

2.1、将高德地图引入到项目中

vue中引入并使用高德地图_会隐身的小圆子的博客-CSDN博客_vue 高德地图一、使用npm引入高德地图1.进入高德开放平台2.点击： 开发支持---------地图JS AP---------JSAPI的加载3.选择 按NPM方式使用loader4.定义一个有宽高的div二、小试牛刀----修改鼠标样式1.点击示例中心---------地图的创建---------地图属性-------设置鼠标样式右侧有示例代码下图是自己写的代码，需要注意几点（1）官方代码绑定的click事件传递的this 指当前点击元素，但是vue是没有的，在这里可以不传参，也https://blog.csdn.net/weixin_61032994/article/details/123984929

        先参者上面这篇博客，注册应用的过程就不在这里重复了，第一步是把自己的地图在页面上显示出来，其他的慢慢来。

2.2、查看官网快速上手，熟悉高德地图的主要API 

快速上手-入门-教程-地图 JS API v2.0 | 高德地图API高德开放平台官网https://lbs.amap.com/api/jsapi-v2/guide/abc/quickstart

2.3、海量点标注要用到的API文档

1. 在 2.1 中写出地图的基础上，设置一些假数据模拟海量点，参考以下文档，实现海量点标记。

标注和标注图层-海量点-海量点标记-示例中心-JS API 2.0 示例 | 高德地图API高德开放平台官网https://lbs.amap.com/demo/jsapi-v2/example/mass-markers/labelmarker-mass 2. 在海量点标记上给点添加信息窗口给多个点添加信息窗体-信息窗体-示例中心-JS API 2.0 示例 | 高德地图API高德开放平台官网https://lbs.amap.com/demo/jsapi-v2/example/infowindow/add-infowindows-to-multiple-markers

Vue高德地图自定义信息窗内绑定点击事件_鱼趴的博客-CSDN博客_高德地图的信息窗加点击事件因为信息窗肯定是在生成标记后点击触发的事件，所以在 methods 中直接定义点击生成标记事件，不过多赘述，本文主要解决点击标记弹出的信息窗内的点击事件绑定问题这是高德官方文档中 自定义窗口数据的添加方式，看起来太麻烦且不好对代码进行操作content = [];content.push("地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公._1671465600https://blog.csdn.net/tr1098891979/article/details/122066021

 3. 查看 API 手册，细化自己要使用到的功能覆盖物-参考手册-地图 JS API | 高德地图API高德开放平台官网https://lbs.amap.com/api/javascript-api/reference/overlay

2.4、全部代码

 其他：

高德地图点击标记并获取标记点坐标和地址信息_木子李0531的博客-CSDN博客html

门店名称：