Jak uzyskać element HTML DOM znacznika Google Maps?

Question

Biorąc pod uwagę zmienną GMS JS, jak uzyskać element HTML DOM, który ją reprezentuje? Potrzebuję tego, abym mógł wstawić własny plik <div> do mapy z poprawnym indeksem Z.

Dzięki.

Answer 1

Wygląda na to, że interfejs API serwisu Mapy Google nie zapewnia metody zwracania elementu DOM znacznika.

Czy chcesz utworzyć własny niestandardowy znacznik? Jeśli tak, możesz utworzyć klasę znaczników rozszerzającą GOverlay. MarkerLight to doskonały przykład tego, jak to osiągnąć (i tutaj jest example page).

Jeśli potrzebujesz tylko niestandardowej ikony, to jak to zrobić, here.

Answer 2

Przepraszamy za posty na tak stare pytanie, ale sam się o tym przekonałem. Rozwiązaniem zastosowanym w Google Maps APIv3 było skopiowanie "Custom Marker" z the Google Maps samples i dodanie prostej metody getDOMElement, która zwraca div wygenerowany w konstrukcji Markera.

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

Następnie można użyć marker.getDOMElement().style dynamicznie zmienić stylistykę znacznika, a element img dzieckiem marker.getDOMElement() ikona jest używany, więc można zmieniać dynamicznie zbyt.

Answer 3

To jest prostszy CustomMarker, którego używam. Po prostu podaj element DOM i będzie on używany jako znacznik!

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

~