Question

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

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

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

我想要完成的是操纵DOM元素（）并提供更多信息，然后只是一个带背景的'div'元素。

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

有没有人有想法？

Answer 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 + "']")

Answer 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;
    }

});

希望这有助于某人。

Answer 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);
            };

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

Answer 4

自定义叠加层（通过实现onAdd，draw，remove），同时拖动它有一些问题。
也许您可以通过类名gmnoprint获取标记dom元素，并将其附加到索引中。

Answer 5

我检查了Google Maps标记的click事件是否具有MosueEvent属性，并且鼠标事件的目标是标记的dom元素。

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

我检查一下clickEvent对象的属性，该属性是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;
        }
    }
});

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

5 个答案: