Google 地图顶部的网格会产生正方形间隙

Question

我有这个函数可以在谷歌地图上生成一个网格。

var map;
var gribBlockSize = 1000;

// LOCATION MELB
var startingLatLng = new google.maps.LatLng(-37.68699757550263,145.06485261920773);
var width = 10;
var height = 10;

function initialize() {
    var rectangle;
    var myOptions = {
        zoom: 10,
        center: startingLatLng,
        mapTypeControl: false,
        navigationControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

    map.set('styles', [
        {
        "stylers": [
          { "visibility": "simplified" },
          { "saturation": -100 }
        ]
        },{
        featureType: 'road',
        elementType: 'geometry',
        stylers: [
        { color: '#333333' },
        { weight: 5 }
        ]
        }, {
        featureType: 'road',
        elementType: 'labels',
        stylers: [
            { visibility: 'on' }
          ]
        }, {
        featureType: 'landscape',
        elementType: 'geometry',
        stylers: [
            { visibility: 'on' }
          ]
        }, {
        featureType: 'poi',
        stylers: [
            { visibility: 'off' }
          ]
        }
    ]);

    drawRects();
} 

function drawRects () {
    var NW = startingLatLng

    var NS = google.maps.geometry.spherical.computeOffset(NW,gribBlockSize,90)
    var SS = google.maps.geometry.spherical.computeOffset(NW,gribBlockSize,180)

    for (var i = 0; i < height; i++) {
        NE = google.maps.geometry.spherical.computeOffset(NS,i*gribBlockSize,180)
        SW = google.maps.geometry.spherical.computeOffset(SS,i*gribBlockSize,180)

        for (var a = 0; a < width; a++) 
        {
            var path = [];
            var rectangle = new google.maps.Rectangle();
            var rectOptions = {
                bounds: new google.maps.LatLngBounds(SW,NE)
            };
            rectangle.setOptions(rectOptions);

            // TESTING TO GET ALL 4 CORNERS
            var NECorner = NE;
            var SWCorner = SW;

            var corner1 = new google.maps.LatLng(NECorner.lat(), NECorner.lng()); // NE
            var corner2 = new google.maps.LatLng(SWCorner.lat(), NECorner.lng()); // SE
            var corner3 = new google.maps.LatLng(SWCorner.lat(), SWCorner.lng()); // SW
            var corner4 = new google.maps.LatLng(NECorner.lat(), SWCorner.lng()); // NW

            var polygon = new google.maps.Polygon({
                strokeColor: "#FF0000",
                strokeOpacity: 0.25,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.1,
                map: map,
                paths: [corner1, corner2, corner3, corner4]
            });

            var NE = google.maps.geometry.spherical.computeOffset(NE,gribBlockSize,90);
            var SW = google.maps.geometry.spherical.computeOffset(SW,gribBlockSize,90);
        }
    }
}

现在我遇到的问题是，如果我一直放大，我可以看到方块之间的间隙。当我去生成紧邻该网格集的下一个网格集时，这成为一个主要问题，因为原始网格集的右侧与新集的左侧重叠。水平线很好，只是垂直线有间隙。

关于如何关闭这些有什么想法吗？

谢谢

Answer 1

你的问题是地球是一个扁球体（圆形），你需要在你的“网格”中考虑到这一点，如果你按距离来做的话，正方形的顶部需要比底部短。最简单的解决方案（可能适用于您的用例，也可能不适用于您的用例）是使垂直线与经度线平行，预先计算目标纬度（您希望距离正确的纬度）的经度，然后使用所有“方块”的经度相同。

概念证明小提琴

代码片段：

var map;
var gribBlockSize = 1000; // meters
var NEmark;

// LOCATION MELB
var startingLatLng = new google.maps.LatLng(-37.68699757550263, 145.06485261920773);
var width = 10;
var height = 10;

function initialize() {
  var rectangle;
  var myOptions = {
    zoom: 10,
    center: startingLatLng,
    mapTypeControl: false,
    navigationControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  drawRects();
}

function drawRects() {
  var bounds;
  var NW = startingLatLng;
  // define horizontal lines
  var longitudes = [];
  longitudes.push(NW.lng());
  for (var i = 0; i < width; i++) {
    var longitude = google.maps.geometry.spherical.computeOffset(NW, gribBlockSize, 90).lng();
    longitudes.push(longitude)
    NW = new google.maps.LatLng(NW.lat(), longitude);
  }
  var NW = startingLatLng;
  // for each longitude, make a column of squares
  for (var i = 0; i < longitudes.length - 1; i++) {
    NW = new google.maps.LatLng(startingLatLng.lat(), longitudes[i]);
    for (var j = 0; j < height; j++) {
      var north = NW.lat();
      var south = google.maps.geometry.spherical.computeOffset(NW, gribBlockSize, 180).lat();
      var east = longitudes[i + 1];
      var west = longitudes[i];
      var corner1 = new google.maps.LatLng(north, east); // NE
      var corner2 = new google.maps.LatLng(south, east); // SE
      var corner3 = new google.maps.LatLng(south, west); // SW
      var corner4 = new google.maps.LatLng(north, west); // NW

      var polygon = new google.maps.Polygon({
        strokeColor: "#FF0000",
        strokeOpacity: 0.25,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.1,
        map: map,
        paths: [corner1, corner2, corner3, corner4]
      });
      NW = new google.maps.LatLng(google.maps.geometry.spherical.computeOffset(NW, gribBlockSize, 180).lat(), longitudes[i]);
    }
  }
  // map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>