javascript - 覆盖 map 图 block ，仅显示矩形范围内的图 block

Question

我正在使用 Google Maps API 3 在美国的几个地区绘制网格。在将我自己的解决方案(涉及迭代绘制超过 62000 条折线)拼凑在一起之后，我发现简单地调整 Google 的 Overlay Map Type example 会更容易且不那么密集。到我需要的网格大小，其中缩放级别 20 时每个正方形的边长相当于 90 英尺。到目前为止，该功能运行良好。

我现在的问题有两个:

1. 我只需要绘制位于固定矩形多边形范围内的正方形。应该绘制整个卫星 map ，但我只需要该区域内的网格覆盖。 应该绘制部分重叠。
2. 我还需要每个网格方 block 左上角出现的数字，以便从该矩形的左上角开始计数。这意味着在缩放级别 20 时，每个坐标的长度不应超过 5 位，因为最大 X 值约为 45300，最大 Y 值约为 16800。目前，方 block 从 90° N 180° W 开始计数，在缩放级别 20 时具有六位数坐标。

我怀疑解决方案涉及使用 poly.containsLocation() 检查每个网格方 block 的坐标。 (并且可能在zoom_changed上运行这个)，但是Google的示例页面没有充分解释如何访问各个网格方 block ，所以我没有任何方法来检查它们。

如何访问这些网格方 block ？或者我需要制作一个新的 OverlayView 吗？

到目前为止我的代码如下。

var map;

function CoordMapType(tileSize) {
    this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('div');
    div.innerHTML = coord;
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.fontSize = '10';
    div.style.color = '#FFFFFF';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px';
    div.style.borderColor = '#FFFFFF';
    return div;
};

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 38.2711991, lng: -82.6292357},
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.SATELLITE
});

map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(233, 233)));

gridBox();
}

function gridBox(){
    var gridBox = [
        new google.maps.LatLng(40.638, -75.387),
        new google.maps.LatLng(36.497, -75.387),
        new google.maps.LatLng(36.497, -89.539),
        new google.maps.LatLng(40.638, -89.539),
    ];
    gridBoxSet = new google.maps.Polygon({
        path: gridBox,
        geodesic: false,
        strokeColor: "#AAAAAA",
        strokeOpacity: 1,
        strokeWeight: 4,
        fillColor: "#FFFFFF",
        fillOpacity: 0.2
    });
    gridBoxSet.setMap(map);
}

Answer 1

Google Maps JavaScript API提供了一个 OverlayView 类来创建您自己的自定义叠加层。 OverlayView 是一个基类，它提供了创建叠加层时必须实现的多种方法。该类还提供了一些方法，可以在屏幕坐标和 map 上的位置之间进行转换。

添加自定义叠加层

以下是创建自定义叠加层所需步骤的摘要:

• 将自定义叠加层对象的原型(prototype)设置为 google.maps.OverlayView() 的新实例。实际上，这将子类化覆盖类。
• 为您的自定义叠加层创建构造函数，并设置所有初始化参数。
• 在原型(prototype)中实现 onAdd() 方法，并将叠加层附加到 map 。本地图准备好附加叠加层时，将调用 OverlayView.onAdd()。
• 在原型(prototype)中实现draw()方法，并处理对象的视觉显示。 OverlayView.draw() 将在对象首次显示时调用。
• 您还应该实现一个 onRemove() 方法来清理您在叠加层中添加的所有元素。

您还可以在此处查看完整的工作示例:https://developers.google.com/maps/documentation/javascript/examples/overlay-simple