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

Question

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

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

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

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

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

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

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

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

Answer 2

Я также искал элемент DOM, чтобы реализовать пользовательскую подсказку. Через некоторое время копаться в Google накладками, пользовательские библиотеки и так далее, я уже закончил с следующим раствором на основе заголовка подхода Фредрик (используя 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

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

1. Настроить накладки (по инвентарю onAdd, рисовать , удалите), в то время как у него есть некоторые проблемы.
2. Может быть, вы можете получить маркер DOM элемент по имени класса gmnoprint и индекса было добавленным в.