Google地图顶部的网格会产生方块间隙 [英] Grid on top of Google maps produces gaps in squares
问题描述
我有这个功能，可以在谷歌地图上生成一个网格。
I have this function that produces a grid on top of Google maps.
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);
}
}
}
现在我遇到的问题如果我一直放大，我可以看到正方形之间的间隙。当我开始生成下一个网格集时，这成为一个主要问题，因为原始的右侧与新集合的左侧重叠。水平线条很好，只有垂直线条有间隙。
Now the problem I am having is that if I zoom all the way in I can see gaps between the squares. This becomes a major issue when I go to produce the next grid set next to this one as the right side of the original overlaps the left side of the new set. The horizontal lines are fine, its just the vertical ones that have the gaps.
关于如何关闭这些线条的想法？
Any thoughts on how I can close these?
谢谢
推荐答案
你的问题是地球是一个扁圆形的圆形（圆形），你需要考虑到在你的网格中，如果按距离进行，则方块的顶部需要比底部短。最简单的解决方案（可能适用于或不适用于您的用例）是使垂直线与经度线平行，预先计算目标纬度（您希望距离正确的纬度）的经度，然后使用所有正方形的经度相同。
Your problem is that the earth is an oblate spheriod (round), you need to account for that in your "grid", the top of the square needs to be shorter than the bottom if you are doing it by distance. The simplest solution (may or may not work for your use case) is to make the verticals parallel to the lines of longitude, pre-compute the longitude at the target latitude (the latitude where you want the distance to be correct), then use the same longitudes for all the "squares".
代码段
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>
这篇关于Google地图顶部的网格会产生方块间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
