Question

我正在使用Google Maps API 3在几个美国上绘制网格。在将我自己的解决方案拼凑在一起，其中涉及迭代地绘制了超过62,000条折线之后，我发现将Google的Overlay Map Type example简化为我需要的网格尺寸变得更加容易且不那么密集，其中每个正方形的边长都在缩放20级相当于90英尺。到目前为止，这个功能很好。

我现在的问题有两个：

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

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

如何访问这些网格方块？或者我是否需要制作新的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是一个基类，它提供了在创建叠加层时必须实现的几种方法。该类还提供了一些方法，可以在地图上的屏幕坐标和位置之间进行转换。

添加自定义叠加层

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

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

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

Answer 2

在意识到getTile方法如何将坐标值写入每个div的innerHTML之后，我想出了如何限制绘制哪些。这是我的代码。这是非常hackish并没有直接检查瓷砖与边界，但它的工作和性能方面非常顺利。

var map;
var zoom;

function CoordMapType() {
    this.tileSize = new google.maps.Size(233, 233);
}

var firstX = 289496; //coord.x of top left of rectangle
var firstY = 433476; //coord.y of top left of rectangle
var lastX = 45290; //width of rectangle in tiles
var lastY = 16959; //height of rectangle in tiles

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var coordX = coord.x-(firstX/(Math.pow(2,(20-zoom))));
    var coordY = coord.y-(firstY/(Math.pow(2,(20-zoom))));
    var maxX = lastX/(Math.pow(2,(20-zoom)));
    var maxY = lastY/(Math.pow(2,(20-zoom)));
    var div = ownerDocument.createElement('div');
    div.innerHTML = "("+coordX.toFixed(0)+","+coordY.toFixed(0)+")";
    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';
    if((coordX>-1 && coordX<maxX) && (coordY>-1 && coordY<maxY)){
        return div;
    } else{
        return null;
    }
};

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.setTilt(0);

    map.addListener('zoom_changed', function() {
        zoom = map.getZoom();
        console.log(zoom);
    });

    drawGrid();

    map.overlayMapTypes.insertAt(0, new CoordMapType());

}

叠加地图图块，仅显示矩形边界内的图块

2 个答案: