Wie erhält man das HTML-DOM-Element eines Google Maps-Markers?

Question

Wie bekomme ich für eine GMarker JS-Variable das HTML-DOM-Element, das es darstellt? Ich brauche das, damit ich eine eigene <div> in die Karte mit dem richtigen Z-Index einfügen kann.

Danke.

Answer 1

Es sieht so aus, als ob die Google Maps-API keine Methode zum Zurückgeben des DOM-Elements eines Markers bietet.

Möchten Sie nur Ihren eigenen benutzerdefinierten Marker erstellen? Wenn ja, können Sie eine Marker-Klasse erstellen, die GOverlay erweitert. MarkerLight ist ein großartiges Beispiel, wie man das erreicht (und hier ist die example page).

Wenn alles, was Sie brauchen, ein benutzerdefiniertes Symbol ist, ist here, wie man das macht.

Answer 2

Entschuldigen Sie, um auf solch eine alte Frage zu setzen, aber ich bin gerade auf diese selbst gestoßen. Die Lösung, die ich in Google Maps APIv3 verwendet habe, war, den "Custom Marker" von the Google Maps samples zu kopieren und eine einfache Methode getDOMElement hinzuzufügen, die den in der Marker-Konstruktion erzeugten div zurückgibt.

CustomMarker.prototype.getDOMElement = function() { 
    return this.div_; 
} 

Sie können dann marker.getDOMElement().style verwenden, um dynamisch das Styling Ihrer Markierung zu ändern, und das img geordnetes Element von marker.getDOMElement() ist das Symbol verwendet, so können Sie das auch dynamisch ändern.

Answer 3

Dies ist ein einfacher CustomMarker, den ich benutze. Stellen Sie einfach ein DOM-Element zur Verfügung und es wird als Marker verwendet!

// based on http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html 

function CustomMarker(options) { 
    this.options = options; 
    this.element = options.element; 
    this.map = options.map; 
    this.position = options.position; 
    this.positionFunction = options.positionFunction || function() { 
    var point = this.getProjection().fromLatLngToDivPixel(this.position); 
    if (point) { 
     this.element.style.position = 'absolute'; 
     this.element.style.left = (point.x - jQuery(this.element).width()/2) + 'px'; 
     this.element.style.top = (point.y - jQuery(this.element).height()) + 'px'; 
     this.element.style.cursor = 'pointer'; 
    } 
    }; 

    this.setMap(this.map); 
} 

CustomMarker.prototype = new google.maps.OverlayView(); 
CustomMarker.prototype.draw = function() { 
    if (!this.div_) 
    this.getPanes().overlayImage.appendChild(this.element); 
    this.positionFunction(); 
}; 
CustomMarker.prototype.getPosition = function() { 
    return this.position; 
}; 
CustomMarker.prototype.setVisible = function(bool) { 
    jQuery(this.element).toggle(bool); 
}; 

~