通过 API 自定义谷歌地图图层？

Question

这是关于 Google Maps API v3：

当您在自定义 Google 地图中绘制各种 Polylines、Polygons、MapLabels 或任何其他叠加元素时，它会将它们绘制在 mapPane 上。是否可以以某种方式创建多个自定义层，您可以在其上绘制 Overlay 对象，然后轻松启用/禁用（显示/隐藏）这些层？

我在这里看到有关层的文档：https://developers.google.com/maps/documentation/javascript/layers

但没有关于自定义层。

Answer 1

您可以创建一个自定义 OverlayView 来做到这一点：

var LayerOverlay = function () {
  this.overlays = [];
}
LayerOverlay.prototype = new google.maps.OverlayView();
LayerOverlay.prototype.addOverlay = function (overlay) {
  this.overlays.push(overlay);
};
LayerOverlay.prototype.updateOverlays = function () {
  for (var i = 0; i < this.overlays.length; i++) {
    this.overlays[i].setMap(this.getMap());
  }
};
LayerOverlay.prototype.draw = function () {};
LayerOverlay.prototype.onAdd = LayerOverlay.prototype.updateOverlays;
LayerOverlay.prototype.onRemove = LayerOverlay.prototype.updateOverlays;

然后，一旦将叠加层添加到 LayerOverlay，您就可以仅使用一个 setMap 来显示或隐藏它们：

var layer1 = new LayerOverlay();
layer1.addOverlay(createMarker());
layer1.addOverlay(createMarker());
layer1.addOverlay(createMarker());

// hide all markers
layer1.setMap(null);

// show all markers
layer1.setMap(map);