Google Maps: wiele niestandardowych znaczników HTML

Question

Pracowałem nad tym fiddle i chciałbym poradzić się.

Jak widać, nie mogę uzyskać wielu znaczników do renderowania we właściwym miejscu. Niezależnie od tego, co robię, oba znaczniki renderują na podstawie położenia drugiego znacznika w tablicy htmlMarker[i].

Dzięki za pomoc!

Dla porównania, tutaj jest JS:

var overlay; 

function initialize() { 
    var myLatLng = new google.maps.LatLng(62.323907, -150.109291); 
    var mapOptions = { 
     zoom: 11, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 

    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    function HTMLMarker(lat,lng){ 
     this.lat = lat; 
     this.lng = lng; 
     this.pos = new google.maps.LatLng(lat,lng); 
    } 

    HTMLMarker.prototype = new google.maps.OverlayView(); 
    HTMLMarker.prototype.onRemove= function(){} 

    //init your html element here 
    HTMLMarker.prototype.onAdd= function(){ 
     div = document.createElement('DIV'); 
     div.className = "htmlMarker"; 
     div.innerHTML = '<img src="http://www.vcsd.org/img/icon/red.png">'; 
     var panes = this.getPanes(); 
     panes.overlayImage.appendChild(div); 
    } 

    HTMLMarker.prototype.draw = function(){ 
     var overlayProjection = this.getProjection(); 
     var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
     var panes = this.getPanes(); 
     panes.overlayImage.style.left = position.x + 'px'; 
     panes.overlayImage.style.top = position.y + 'px'; 
    } 

    //to use it 
    htmlMarker = []; 
    htmlMarker[0] = new HTMLMarker(gmap.getCenter().k, gmap.getCenter().D); 
    htmlMarker[1] = new HTMLMarker(gmap.getCenter().k+.05, gmap.getCenter().D+.05); 
    htmlMarker[0].setMap(gmap); 
    htmlMarker[1].setMap(gmap); 
} 

I zostały zaktualizowane na skrzypcach (patrz aktualizacji), aby wykonać niektóre rejestrowanie wewnątrz HTMLMarker(); i na końcu skryptu. Tutaj jest wyjście:

HTMLMarker(lat,lng)= 62.323907, -150.10929099999998 
HTMLMarker(lat,lng)= 62.373906999999996, -150.05929099999997 
HTMLMarker.prototype.draw=500.5001116444473, 296.6240725676762 
HTMLMarker.prototype.draw=573.3178894222365, 139.71828594914405 

Wygląda na to, że poprawne informacje są przekazywane, ale gdzieś coś jest przesłonięte.

UPDATE

udało mi się wyizolować elementy HTML znacznik na mapie. Wygląda na to, że są zagnieżdżone w jednej nakładce:

<div style="transform: translateZ(0px); position: absolute; left: 573.317889422237px; top: 139.718285949144px; z-index: 104; width: 100%;"> 
    <div class="htmlMarker"> 
    <img src="http://www.vcsd.org/img/icon/red.png"> 
    </div> 
    <div class="htmlMarker"> 
    <img src="http://www.vcsd.org/img/icon/red.png"> 
    </div> 
</div> 

Answer 1

Musisz ustawić położenie obrazów (lub elementów div zawierających obrazy).

Obecnie można ustawić pozycję overlayImage -pane (jest to pojedynczy element, każde wystąpienie HTMLMarker zostaną dołączone do tego samego elementu/panelu)

kod Poprawiono:

//init your html element here 
HTMLMarker.prototype.onAdd= function(){ 
    this.div = document.createElement('DIV'); 
    this.div.className = "htmlMarker"; 
    this.div.style.position='absolute'; 
    this.div.innerHTML = '<img src="http://www.vcsd.org/img/icon/red.png">'; 
    var panes = this.getPanes(); 
    panes.overlayImage.appendChild(this.div); 
} 

HTMLMarker.prototype.draw = function(){ 
    var overlayProjection = this.getProjection(); 
    var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
    var panes = this.getPanes(); 
    this.div.style.left = position.x + 'px'; 
    this.div.style.top = position.y + 'px'; 
} 

http://jsfiddle.net/q2cnne7y/17/