Получить DOM элемент маркера в Google Maps API 3

Question

Я пытаюсь найти способ получить элемент DOM маркера. Похоже, что Google использует разные элементы для отображения маркера и одного элемента для обработки события.

Я выяснил 2 вещи до сих пор. Существует сгенерированная переменная с именем fb, которая содержит элемент DOM для объекта маркера, но я думаю, что в следующий раз, когда Google обновит API, он будет назван как-то по-другому. Так что не уходи.

Во-вторых, если прикрепить событие click к маркеру, API отправит элемент DOM события в качестве аргументов любой указанной вами функции. Просматривая его в Firebug, я не могу найти никаких отношений между ними.

То, что я пытаюсь сделать, это манипулировать элементом DOM () и передавать ему больше информации, чем просто элемент 'div' с фоном.

Я сделал это в версии 2, используя свойство name (недокументированное), которое генерирует идентификатор для элемента div.

У кого-нибудь есть идея?

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 для реализации настраиваемой подсказки. Через некоторое время, копаясь в оверлеях Google, пользовательских библиотеках и т. Д., Я получил следующее решение, основанное на подходе заголовков 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

1. Настройка оверлеев (с помощью onAdd, draw, remove) при перетаскивании имеет некоторые проблемы.
2. Может быть, вы можете получить элемент marker dom по имени класса gmnoprint и индексу, в который он был добавлен.