我需要在地图上放置网格,网格框为1/4分钟x 1/4分钟。我是一个梯形。我正在使用Delphi和TWebBrowser利用的JavaScript。
现在我正在响应click事件以测试绘制单个gridBox但我必须绘制Bounds已更改事件并使用网格填充地图。
由于1/4分钟的网格非常小,因此预先保存在KML或融合中是不切实际的,所以我决定在地图上动态绘制它。
我的网格框将始终落在qtrMinute边界上。我想要确定的是如何创建这些框来填充地图。
我需要从左上角开始绘制它们直到左下角,每当边界改变时重绘它们。
我会限制用户的缩放,以免造成过多的绘图时间。
有人会帮助我使用网格框填充屏幕的逻辑。
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false"></script>
<title>Find your Qtr minute locator</title>
</head>
<body style="height:100%;margin:0">
<!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="width: 100%; height: 95%;"></div>
<script type="text/javascript">
var map;
var qtrArray = [];
var linesArray = [];
var Startlatlng;
var drawGridBox = false;
var gridline;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(33.00, -100.00),
zoom: 10,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
});
var llOffset = 0.0666666666666667;
var oLat = 34.00;
var oLon = -100.00;
var gridlocator = [ new google.maps.LatLng(oLat, oLon)];
google.maps.event.addListener(map, 'click', function (event) {
/* google.maps.event.addListener(map, 'bounds_changed', DrawLine); */
// Square limits
var bottomLeftLat = Math.floor(event.latLng.lat() / llOffset) * llOffset;
var bottomLeftLong = Math.floor(event.latLng.lng() / llOffset) * llOffset;
var bounds = new google.maps.LatLngBounds();
var i;
var gridLineSquare = [
new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
new google.maps.LatLng(bottomLeftLat, bottomLeftLong + llOffset), //lwr right
new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong + llOffset), //upr right
new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong),
new google.maps.LatLng(bottomLeftLat, bottomLeftLong)];
for (i = 0; i < gridLineSquare.length; i++) {
bounds.extend(gridLineSquare[i]);
}
external.getData(event.latLng);
if (drawGridBox == true) {
polyline = new google.maps.Polyline({
path: polylinesquare,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
});
polyline.setMap(map);
qtrArray.push(polyline);}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function DrawGridOn() {drawGridBox = true}
function DrawGridOff() {drawGridBox = false}
function ClearLastGrid(){polyline.setMap(null); }
</script>
</body>
</html>
答案 0 :(得分:1)
将网格绘制为完整折线而不是框更有效:
function createGridLines(bounds) {
// remove any existing lines from the map
for (var i=0; i< latPolylines.length; i++) {
latPolylines[i].setMap(null);
}
latPolylines = [];
for (var i=0; i< lngPolylines.length; i++) {
lngPolylines[i].setMap(null);
}
lngPolylines = [];
// don't add the lines if the boxes are too small to be useful
if (map.getZoom() <= 6) return;
var north = bounds.getNorthEast().lat();
var east = bounds.getNorthEast().lng();
var south = bounds.getSouthWest().lat();
var west = bounds.getSouthWest().lng();
// define the size of the grid
var topLat = Math.ceil(north / llOffset) * llOffset;
var rightLong = Math.ceil(east / llOffset) * llOffset;
var bottomLat = Math.floor(south / llOffset) * llOffset;
var leftLong = Math.floor(west / llOffset) * llOffset;
for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) {
// lines of latitude
latPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(latitude, leftLong),
new google.maps.LatLng(latitude, rightLong)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
}
for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) {
// lines of longitude
lngPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(topLat, longitude),
new google.maps.LatLng(bottomLat, longitude)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
}
}
代码段
var map;
var qtrArray = [];
var linesArray = [];
var Startlatlng;
var llOffset = 0.0666666666666667;
var drawGridBox = false;
var gridline;
var polylinesquare;
var latPolylines = [];
var lngPolylines = [];
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(33.00, -100.00),
zoom: 10,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
});
google.maps.event.addListener(map, 'bounds_changed', function() {
createGridLines(map.getBounds());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function createGridLines(bounds) {
// remove any existing lines from the map
for (var i = 0; i < latPolylines.length; i++) {
latPolylines[i].setMap(null);
}
latPolylines = [];
for (var i = 0; i < lngPolylines.length; i++) {
lngPolylines[i].setMap(null);
}
lngPolylines = [];
// don't add the lines if the boxes are too small to be useful
if (map.getZoom() <= 6) return;
var north = bounds.getNorthEast().lat();
var east = bounds.getNorthEast().lng();
var south = bounds.getSouthWest().lat();
var west = bounds.getSouthWest().lng();
// define the size of the grid
var topLat = Math.ceil(north / llOffset) * llOffset;
var rightLong = Math.ceil(east / llOffset) * llOffset;
var bottomLat = Math.floor(south / llOffset) * llOffset;
var leftLong = Math.floor(west / llOffset) * llOffset;
for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) {
// lines of latitude
latPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(latitude, leftLong),
new google.maps.LatLng(latitude, rightLong)
],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
}
for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) {
// lines of longitude
lngPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(topLat, longitude),
new google.maps.LatLng(bottomLat, longitude)
],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
}
}
&#13;
body,
html {
height: 100%;
margin: 0
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="width: 100%; height: 95%;"></div>
&#13;