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

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

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

一、需求

我已经定义了一个这样的地图,并添加了这些标记,现在需要在点击这些标记的时候获取到对应的项目 id
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息_第1张图片

二、探索解决

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

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)

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

这里我们需要获取到上面提前定义好的 data-projectid 值。
答案全在 mapEvent 上,来看一下 mapEvent.target 内都有什么:
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息_第2张图片
我们需要的是 mapEvent.target.dom 中的内容,它是一个 dom 对象:

高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息_第3张图片
获取到了它,就能使用 dom 的操作方法对齐进行取值了:
如果对 dom 的操作方法不太了解,最好去找下相送资料看一下,常见的就是:

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

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

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

高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息_第4张图片

4. 做后续操作

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

你可能感兴趣的:(高德地图,#,JS,#,Vue,javascript,前端,html)