如何在Google Maps API中添加多个叠加标记

Question

I was thankfully able to one marker to show on the screen using this fiddle, however, when I created another marker or any after that, it seems that the markers append&stacked on themselves.

Is there a way to have each marker in it's own location?

The Fiddle: http://jsfiddle.net/syrtrjsa/5/

And it's code:

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.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:30px;height:22px">' + 21;
        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 - 30 + 'px';
    }

    //to use it
    var htmlMarker = new HTMLMarker(62.323907, -150.109291);
    htmlMarker.setMap(gmap);
    var htmlMarker = new HTMLMarker(62.323907, -151.109291);
    htmlMarker.setMap(gmap);
}

Answer 1

Your implementation of OverlayView is wrong.

In draw() you must set the left / top of the div , not of the pane. Additionally the div must have the position set to absolute

Fixed version:

http://jsfiddle.net/syrtrjsa/15/

Answer 2

You can try this :)... store array HTMLMarker :)

var htmlMarker[];
for(var i = 0; i < 10; i++){
    (function(i){            
        htmlMarker[i] = new HTMLMarker(items[i].lat, items[i].lng);
        htmlMarker[i].setMap(gmap);
     })(i);
}

in this code: items is array of location :) ...