如何为自定义叠加添加信息窗口？

【问题标题】：How to add info window for custom overlays?如何为自定义叠加添加信息窗口？
【发布时间】：2015-12-17 23:20:09
【问题描述】：

我已经实现了一个自定义叠加层。我想添加一个事件，当我单击覆盖时会弹出一个信息窗口。

function initMap() {
  var map = new google.maps.Map(document.getElementById('okmap'), {
    zoom: 4,
    center: {lat: 35.0000, lng: 103.0000}
  });

  for (var n in nodes) {
      var myMarker = new MyMarker(map, {latlng: new google.maps.LatLng(nodes[n][0], nodes[n][1]), 
                                    image: 'assets/img/light-green.png',
                                    labelText: (Math.random() * 100).toFixed(0)});
      markers.push(myMarker);
      var infowindow = new google.maps.InfoWindow({
          content: n
      });
      myMarker.addListener('click', function() {
          infowindow.open(map, myMarker);
      });
  }
}

但它不起作用！

【问题讨论】：

我在标记绘制函数中添加了 infoWindow 函数，我将自定义 div 绘制为标记。它正在显示 infoWindow，但它的位置受到干扰。

标签： maps overlay infowindow

【解决方案1】：

前段时间我遇到了一个类似的问题。这里有两件事对我有帮助。我正在考虑将主要覆盖元素设为div。

在您的 MyMarker.draw 函数中，确保您使用的是可以访问 DOM 事件的窗格。例如

    var panes = this.getPanes();
    panes.overlayMouseTarget.appendChild(div);

确保在MyMarker.draw 函数中定义一个事件监听器。

google.maps.event.addDomListener(div, "click", function(event) {
    google.maps.event.trigger(self, "click");
});

【讨论】：