谷歌地图：多个自定义 HTML 标记答案

【问题标题】：Google Maps: Multiple Custom HTML Markers谷歌地图：多个自定义 HTML 标记
【发布时间】：2015-05-25 15:39:28
【问题描述】：

我一直在处理这个fiddle，我想要一些建议。

如您所见，我无法在正确的位置渲染多个标记。无论我做什么，两个标记都会根据htmlMarker[i] 数组中第二个标记的位置进行渲染。

感谢您的帮助！

供参考，这里是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);
}

我已经更新了小提琴（见更新）在 HTMLMarker();并在脚本的末尾。这是输出：

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

所以看起来正确的信息正在被传递，但是某些地方正在被覆盖。

更新

我能够隔离地图上的标记 HTML 元素。看起来它们被嵌套在一个叠加层中：

<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>

【问题讨论】：

所以从您的问题来看，这意味着这两个标记都呈现在完全相同的位置？这不是我从你的 jsfiddle 看到的。您可能需要附上您希望看到的屏幕截图；我可能误解了这个问题。一个问题;为什么所有这些 OverlayView - 你不能只使用普通标记吗？
Duncan，查看我对地图中呈现的 HTML 的更新。另外，我需要覆盖视图，因为我计划在标记图像持有者内动态渲染图像。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您必须设置图像（或包含图像的 div）的位置。

当前您设置overlayImage-pane 的位置（它是单个元素，HTMLMarker 的每个实例都将附加到同一个元素/窗格）

固定代码：

//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/

【讨论】：