如何在google maps api中添加多个叠加标记

Question

我很幸运能够使用这个小提琴在屏幕上显示一个标记,然而,当我创建另一个标记或之后的任何标记时,似乎标记附加并堆叠在自身上.

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

小提琴:http: //jsfiddle.net/syrtrjsa/5/

它的代码是:

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

你的OverlayView实现是错误的.

在draw()您必须设置left/ top的div,没有的窗格.此外,div必须将位置设置为absolute

固定版本:

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