如何在地图的查看区域中创建网格
How to create a Grid in the viewing area of a map
我需要在地图上放置一个网格,其中网格框是1/4分钟x 1/4分钟。它是一个梯形。我正在使用JavaScript的Delphi和TWebBrowser杠杆。
现在我正在响应点击事件来测试绘制单个gridBox,但我将不得不在Bounds changed事件上绘制并使用网格填充地图。
由于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>
将网格绘制成完整的折线而不是方框会更有效:
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
}));
}
}
body,
html {
height: 100%;
margin: 0
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="width: 100%; height: 95%;"></div>
相关文章:
- onkeyup无法动态创建多个文本区域
- 如何为高图中的区域线创建z索引
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 如何为动态创建的文本区域中输入的值更新ng模型
- 如何在sap.m.Image元素上创建可点击区域
- 在文本输入区域中创建双向更新
- 使用不同的日期格式和区域设置创建时刻
- 如何在不使用iframe或库的情况下创建剪切显示窗口区域
- 在SVG中创建带有外来对象的文本区域的Javascript不起作用
- 设置焦点动态创建的文本区域
- 在提交之前创建文本区域预览
- 在文本区域(密文器)中创建自动分页符
- 如何创建具有滚动背景图像的可滚动文本区域
- 创建选项卡,每个选项卡有两个文本区域
- 如何根据电子邮件模板名称的选择创建依赖的同义词文本区域
- 无法检索动态创建的文本区域 jquery 的文本
- 可以't将通过Javascript创建的画布指定为放置区域
- 使用php创建的下拉列表中的选择单独填充文本区域
- 为基于html/javascript的文本区域创建一个退格按钮
- 如何防止XSS,使用文本区域创建javascript代码