高德地图 API，点击地图标记获取自定义标记 (Marker) 中的信息

高德地图 API，点击地图标记获取自定义标记 (Marker) 中的信息

通过 高德地图 JS Web 添加自定义图标，自定义窗口标记 已经能在地图中正常添加自定义标记了
这篇文章讲讲点击标记时，如何从自定义标记中获取你需要的信息，如何预置一些你自己的信息。

一、需求

我已经定义了一个这样的地图，并添加了这些标记，现在需要在点击这些标记的时候获取到对应的项目 id

二、探索解决

没找到官方的例子，所以自己解决。

1. 如何往地图中添加标记

标记的添加是这样的过程（具体在上面提到的链接中有，不再冗述）：

1. 新建 AMap.Marker 的地图标记对象
2. 将这些 Markers[] 添加到已经建好的地图对象中
3. 标记就能正常呈现到地图中了

2. 给标记添加点击事件

在上面的第2步中，可以给 Marker 添加点击事件，跟普通的 dom 一样操作，它的格式是这样的：
我这里定义的是自定义的标记点，并在其 html 结构中添加了名为 data-projectid 的参数

// 1. 新建 Marker
let marker = new AMap.Marker({
                position: [
                    Number(projectItem.prjinfo.location.longitude),
                    Number(projectItem.prjinfo.location.latitude),
                ],
                offset: new AMap.Pixel(0,-20),
                content: `
			               
${projectItem.id}" class="marker ${projectItem.status === 'offline'? 'offline': ''}">
			                  
${projectItem.prjinfo.projectname}
			                  
位置： ${projectItem.prjinfo.location.detail}
			                  
设备： ${projectItem.prjinfo.deviceCnt} 个
			                  
状态： ${projectItem.status === 'offline'? '离线': '在线'}
			               `,}]

// 2. 给这个 Marker 添加点击事件
marker.on('click', mapEvent => {
    console.log(mapEvent.target.dom.getElementsByClassName('marker')[0].getAttribute('data-projectid'))
    console.log(mapEvent.target)
})

// 3. 添加到地图中
map.add(marker)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3. 获取自定义标记中的自定义参数值

这里我们需要获取到上面提前定义好的 data-projectid 值。
答案全在 mapEvent 上，来看一下 mapEvent.target 内都有什么：

我们需要的是 mapEvent.target.dom 中的内容，它是一个 dom 对象：

获取到了它，就能使用 dom 的操作方法对齐进行取值了：
如果对 dom 的操作方法不太了解，最好去找下相关资料看一下，常见的就是：

• getElementById()
• getElementByClassName()
• getElementByTagName()

像下面这样，我们就取到了它的 data-projectid 属性值

mapEvent.target.dom.getElementsByClassName('marker')[0].getAttribute('data-projectid'))
1

4. 做后续操作

取到值之后就可以了，你想怎么处理怎么处理就行了，比如用这个值去跳转到对应的项目中，用这个值去获取对应项目的信息等