javascript - 如何获取 Google map 标记的 HTML？

Question

如何从 Google map 标记 (v3) 获取 HTML 元素？

<div style="overflow-x: hidden; overflow-y: hidden; position: absolute; background-image: url(...); top: 62px; width: 70px; height: 70px; background-size:  ; left: 924px; z-index: 97; opacity: 0,01; cursor: pointer; background-position: 0px -420px; background-repeat: no-repeat no-repeat; " title=""></div>

这是所有标记 map.getPanes().overlayImage; 但我不知道哪个 child 是我的标记...

Answer 1

您可以为每个标记的标题属性分配一个唯一 ID，然后搜索所有标记，直到找到具有该 ID 的标记

for (var marker in map.getPanes().overlayImage.getElementsByTagName("div")) {
  if (marker.title == "some_id") return marker;
}

作为最后的手段，您还可以使用服务器端脚本为每个图像在客户端生成唯一 ID。无论文件名如何(即 mysite.com/marker/De4gy.png)，您的服务器都会返回相同的图像(您的标记图标)。然后，您可以抓取 DOM 以查找在其样式属性中包含该 URL 的 DIV。请注意，这可能会影响性能，因为标记将不再可缓存。

请注意，更改 API 将标记添加到 DOM 的方式可能会破坏上述所有内容。