Hole DOM Element eines Markers in Google Maps API 3

Question

Ich versuche einen Weg zu finden, das DOM-Element eines Markers zu bekommen. Es scheint, dass Google verschiedene Elemente zum Anzeigen eines Markers und zum Behandeln des Ereignisses verwendet.

Ich habe bisher 2 Dinge herausgefunden. Es gibt eine generierte Variable mit dem Namen fb, die das DOM-Element auf einem Marker-Objekt enthält, aber ich denke, wenn Google das API das nächste Mal aktualisiert, wird es etwas anderes genannt. Also geh nicht.

Wenn zweitens ein click -Ereignis an eine Markierung angehängt wird, sendet die API das Ereignis-DOM-Element als Argumente an die von Ihnen angegebene Funktion. Beim Durchschauen in Firebug kann ich keine Beziehungen zwischen den beiden finden.

Was ich versuche zu erreichen, ist das DOM-Element() manipulieren und füttern es mehr Informationen als nur ein "div" -Element mit einem Hintergrund.

Ich habe dies in Version 2 mit einer Namenseigenschaft (nicht dokumentiert), die eine ID auf dem Element div generiert.

Hat jemand eine Idee?

Answer 1

Ich fand einen wirklich sehr schlechten Workaround. Man kann das Attribut title verwenden, um eine ID-Eigenschaft zu übergeben.

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

Ich würde diese Lösung für keine Produktionsumgebung stark empfehlen. Aber jetzt benutze ich es, damit ich mich weiterentwickeln kann. Aber immer noch auf der Suche nach einer besseren Lösung.

Answer 2

Ich suchte auch nach dem DOM-Element, um einen benutzerdefinierten Tooltip zu implementieren. Nach einer Weile in Google-Overlays zu graben, kundenspezifische Bibliotheken und so weiter, ich habe mit der folgenden Lösung auf fredrik Titel Ansatz (mit jQuery) auf der Basis gelandet:

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

}); 

hoffe, das hilft jemand.

Answer 3

Ich habe diese Methode als nützlich gefunden, obwohl sie möglicherweise nicht für alle Umgebungen geeignet ist. Wenn Sie das Marker-Image festlegen, fügen Sie der URL einen eindeutigen Anker hinzu. Zum Beispiel:

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

Jetzt haben Sie einen einzigartiger Selektor dh:

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

oder wenn Sie den Marker haben:

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

Answer 4

1. anpassen Overlays (durch Arbeitsgeräte onAdd, zeichnet , entfernen), während es einige Probleme hat.
2. Vielleicht können Sie den Marker dom Element durch die Klassennamen gmnoprint und der Index bekommen es in der beigefügten wurde.