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

【问题标题】：Get DOM Element of a marker in Google Maps API 3在 Google Maps API 3 中获取标记的 DOM 元素
【发布时间】：2010-01-14 16:02:24
【问题描述】：

我正在尝试找到一种方法来获取标记的 DOM 元素。 Google 似乎使用不同的元素来显示标记和处理事件。

到目前为止，我已经弄清楚了两件事。有一个名为 fb 的生成变量将 DOM 元素保存在标记对象上，但我认为下次 Google 更新 API 时，它将被命名为不同的名称。所以不去了。

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

我想要完成的是操作 DOM element() 并为其提供更多信息，然后只是一个带有背景的“div”元素。

我在版本 2 中使用了在 div 元素上生成 id 的 name 属性（未记录）。

有人有想法吗？

【问题讨论】：

当你说“喂它”时，你到底是什么意思？用于 InfoWindow 或 Overlay 的 HTML？
将图标替换为 html 元素，该元素包含带有文本和链接的新图标。
另外，很高兴知道为什么 Google 从未实现（并记录）本地方法来检索它。或者只是在 Marker 对象上有一个 HTML 属性，它创建一个给定大小的包装器。而且你可以随意摆弄它。

标签： javascript google-maps dom

【解决方案1】：

我发现这种方法很有用，尽管它可能并不适合所有环境。设置标记图像时，为 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 + "']")

【讨论】：

awsm。 6 年后，这项技术仍然适用于我！

【解决方案2】：

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

google.maps.event.addListener(marker, 'mouseover', function() {

    if (!this.hovercardInitialized) {

        var markerInDOM = $('div[title="' + this.title + '"]').get(0);

        // do whatever you want with the DOM element

        this.hovercardInitialized = true;
    }

});

希望这对某人有所帮助。

【讨论】：

【解决方案3】：

我发现了一个非常糟糕的解决方法。可以使用 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);
            };

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

【讨论】：

【解决方案4】：

在拖动时自定义叠加层（通过实现 onAdd、draw、remove）有一些问题。
也许您可以通过类名gmnoprint 和它所附加的索引来获取标记 dom 元素。

【讨论】：

【解决方案5】：

我检查了谷歌地图标记点击事件中有一个 MosueEvent 属性，鼠标事件的目标是标记的 dom 元素。

它对我有用，直到我发现属性名称已从 tb 更改为 rb。我不知道为什么，也无法在 google maps api 文档中找到对此的解释，但我已经创建了一个解决方法。

我检查了作为 MouseEvent 实例的点击事件对象属性，并将其目标用作标记 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;
        }
    }
});

【讨论】：