谷歌地图顶部的网格会在正方形中产生间隙

Grid on top of Google maps produces gaps in squares

本文关键字：间隙 正方形 顶部 网格 谷歌地图      更新时间：2023-09-26

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

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);
        }
    }
}

现在我遇到的问题是，如果我一直放大，我可以看到正方形之间的间隙。当我制作下一个网格集时，这就成为了一个主要问题，因为原始网格集的右侧与新网格集的左侧重叠。水平线很细，只是垂直线有间隙。

有什么想法可以关闭这些吗？

感谢

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

概念验证小提琴

代码片段：

var map;
var gribBlockSize = 1000;
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"></script>
<div id="map_canvas"></div>

相关文章：