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

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

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

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

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

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

Есть ли у кого-нибудь идеи?

Ответы

Ответ 1

Я нашел действительно очень плохое обходное решение. Для передачи свойства id можно использовать атрибут title.

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

Я бы не рекомендовал это решение для какой-либо производственной среды. Но сейчас я использую его, чтобы я мог продолжать развиваться. Но все еще ищете лучшее решение.

Ответ 2

Я нашел этот метод полезным, хотя он может быть непригоден для всех сред. При настройке изображения маркера добавьте уникальную привязку к 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
});

Теперь у вас есть уникальный селектор i.e.:

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

или если у вас есть маркер:

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

Ответ 3

Я тоже искал элемент 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;
    }

});

Надеюсь, это поможет кому-то.

Ответ 4

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