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

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

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