Javascript 在Google Maps API 3中获取标记的DOM元素

我试图找到一种方法来获取标记的DOM元素。谷歌似乎使用了不同的元素来显示标记和处理事件的元素

到目前为止，我已经想出了两件事。 有一个生成的变量名为

fb

，它保存标记对象上的DOM元素，但我认为下次Google更新API时，它将被命名为不同的名称。所以不去

第二，如果将click事件附加到标记，API会将event DOM元素作为参数发送到指定的函数。在Firebug中查看时，我找不到两者之间的任何关系

我试图完成的是操作DOM元素（）并向它提供更多信息，而不仅仅是一个带背景的“div”元素

在版本2中，我使用name属性（未文档化）在div元素上生成了一个id

---

有人有主意吗？

我发现了一个非常糟糕的解决方法。可以使用title属性传递id属性

fixMarkerId = function () {
                $('div[title^="mtg_"]').each(function (index, elem) {
                    el = $(elem);
                    el.attr('id', el.attr('title'));
                    el.removeAttr('title');
                });
            },
            tryAgainFixMarkerId = function () {
                if ($('div[title^="mtg_"]').length) {
                    fixMarkerId();
                } else {
                    setTimeout(function () {
                        tryAgainFixMarkerId();
                    }, 100);
                };
            }

if ($('div[title^="mtg_"]').length) {
                fixMarkerId();
            } else {
                setTimeout(function () {
                    tryAgainFixMarkerId();
                }, 100);
            };

---

我强烈建议不要将此解决方案用于任何生产环境。但现在我使用它，这样我可以继续发展。但是仍然在寻找更好的解决方案。

为了实现自定义工具提示，我也在寻找DOM元素。 在深入研究了google覆盖图、自定义库等之后，我基于fredrik的标题方法（使用jQuery）得出了以下解决方案：

---

希望这对其他人有所帮助。

我发现这个方法很有用，尽管它可能不适合所有环境。 设置标记图像时，向URL添加唯一的锚定。 例如：

// Create the icon
var icon = new google.maps.MarkerImage(
    "data/ui/marker.png",
    new google.maps.Size(64, 64),
    new google.maps.Point(0,0),
    new google.maps.Point(48, 32)
);

// Determine a unique id somehow, perhaps from your data
var markerId = Math.floor(Math.random() * 1000000);
icon.url += "#" + markerId;

// Set up options for the marker
var marker = new google.maps.Marker({
    map: map,
    optimized: false,
    icon: icon,
    id: markerId,
    uniqueSrc: icon.url
});

现在您有了一个唯一的选择器，即：

$("img[src='data/ui/marker.png#619299']")

或者，如果您有标记：

$("img[src='" + marker.uniqueSrc + "']")

在拖动时自定义覆盖（通过添加、绘制和删除工具），它有一些问题

也许您可以通过类名

gmnoprint

和它所附加的索引来获取marker-dom元素

---

我已经检查过google maps marker click事件是否包含MosueEvent属性，并且鼠标事件的目标是标记的dom元素

在我发现属性名称已从tb更改为rb之前，它一直对我有效。我不知道为什么，在谷歌地图api文档中也找不到对此的解释，但我已经创建了一个解决方案

我检查了MouseEvent实例的click事件对象属性，并将其目标用作标记dom元素

marker.addListener('click', (e) => {

      let markerElement;

   // with underscore
    _.toArray(markerClickEvent).some(item => {
        if (item instanceof MouseEvent) {
            markerElement = item.target;
            return true;
        }
    });
  // or maybe with for loop
for (let key in markerClickEvent) {
        if (markerClickEvent.hasOwnProperty(key) && markerClickEvent[key] instanceof MouseEvent) {
            markerElement = markerClickEvent[key].target;
            break;
        }
    }
});

---

你说“喂它”是什么意思？用于信息窗口或覆盖的HTML？将图标替换为HTML元素，该元素包含一个带有文本和链接的新图标。此外，了解谷歌为何从未实现（并记录）一个本地方法来检索此图标也将是非常棒的。或者在创建给定大小的包装器的Marker对象上有一个HTML属性。你可以随意摆弄它。6年后，这项技术仍然适用于我！

marker.addListener('click', (e) => {

      let markerElement;

   // with underscore
    _.toArray(markerClickEvent).some(item => {
        if (item instanceof MouseEvent) {
            markerElement = item.target;
            return true;
        }
    });
  // or maybe with for loop
for (let key in markerClickEvent) {
        if (markerClickEvent.hasOwnProperty(key) && markerClickEvent[key] instanceof MouseEvent) {
            markerElement = markerClickEvent[key].target;
            break;
        }
    }
});