Ottieni elemento DOM di un indicatore nell'API di Google Maps 3

Question

Sto cercando un modo per ottenere l'elemento DOM di un indicatore. Sembra che Google utilizzi diversi elementi per mostrare un marcatore e uno per gestire l'evento.

Ho capito due cose finora. C'è una variabile generata chiamata fb che contiene l'elemento DOM su un oggetto marcatore, ma penso che la prossima volta che Google aggiorna l'API, verrà nominato qualcosa di diverso. Quindi non andare.

In secondo luogo, se si allega un evento click a un marker, l'API invia l'elemento DOM evento come argomento a qualsiasi funzione che si è specificata. Guardando attraverso di essa in Firebug non riesco a trovare alcuna relazione tra i due.

Quello che sto cercando di realizzare è di manipolare l'elemento DOM() e darle più informazioni quindi solo un elemento 'div' con uno sfondo.

Ho fatto questo nella versione 2 utilizzando una proprietà name (non documentata) che genera un id sull'elemento div.

Qualcuno ha un'idea?

Answer 1

Ho trovato una soluzione davvero molto brutta. Si può usare l'attributo title per passare una proprietà 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); 
      }; 

Non consiglio vivamente questa soluzione per qualsiasi ambiente di produzione. Ma per ora lo uso affinché possa continuare a svilupparsi. Ma ancora alla ricerca di una soluzione migliore.

Answer 2

Stavo cercando anche l'elemento DOM per implementare un tooltip personalizzato. Dopo un po 'scavare nella google sovrapposizioni, librerie personalizzate e così via, ho finito con la seguente soluzione basata su un approccio titolo di Fredrik (usando 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; 
    } 

}); 

Spero che questo aiuta qualcuno.

Answer 3

Ho trovato questo metodo per essere utile, anche se potrebbe non essere adatto a tutti gli ambienti. Quando si imposta l'immagine del marcatore, aggiungere un ancoraggio unico all'URL. Per esempio:

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

Ora avete un unico cioè selettore:

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

o se si dispone il marcatore:

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

Answer 4

1. Personalizza sovrapposizioni (per attrezzi onAdd, disegnare , rimuovi) mentre trascina ha alcuni problemi.
2. Forse si può ottenere l'elemento dom marcatore dal nome della classe gmnoprint e l'indice è stato aggiunto in.