Javascript 如何在google maps api中添加多个覆盖标记

谢天谢地，我能够用这把小提琴在屏幕上显示一个标记，然而，当我创建另一个标记或之后的任何标记时，似乎标记附加并堆叠在自己身上

有没有办法让每个标记都位于自己的位置

小提琴：

代码是：

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

var覆盖；
函数初始化（）{
var mylatng=newgoogle.maps.LatLng（62.323907，-150.109291）；
变量映射选项={
缩放：11，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
var gmap=new google.maps.Map（document.getElementById（'Map_canvas'），mapOptions）；
功能HTMLMarker（lat、lng）{
this.lat=lat；
这是液化天然气=液化天然气；
this.pos=新的google.maps.LatLng（lat，lng）；
}
HTMLMarker.prototype=新的google.maps.OverlayView（）；
HTMLMarker.prototype.onRemove=函数（）{}
//在这里初始化html元素
HTMLMarker.prototype.onAdd=函数（）{
div=document.createElement（'div'）；
div.className=“htmlMarker”；
div.innerHTML=''+21；
var panes=this.getPanes（）；
窗格。覆盖图像。追加子对象（div）；
}
HTMLMarker.prototype.draw=函数（）{
var overlyprojection=this.getProjection（）；
var position=从LatlngToDivPixel（this.pos）的过度投影；
var panes=this.getPanes（）；
panes.overlayImage.style.left=position.x+'px'；
panes.overlayImage.style.top=position.y-30+'px'；
}
//使用它
var htmlMarker=新的htmlMarker（62.323907，-150.109291）；
htmlMarker.setMap（gmap）；
var htmlMarker=新的htmlMarker（62.323907，-151.109291）；
htmlMarker.setMap（gmap）；
}

你可以试试这个：）。。。存储阵列HTMLMarker:）

var-htmlMarker[]；
对于（变量i=0；i<10；i++）{
（职能（i）{
htmlMarker[i]=新htmlMarker（项目[i].lat，项目[i].lng）；
htmlMarker[i].setMap（gmap）；
})（i） )；
}

---

在此代码中：项是位置的数组：）

您对OverlayView的实现是错误的

在

draw（）。此外，
div
必须将位置设置为
absolute

固定版本：


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