在Google地图上绘制区域的矩形 [英] Draw Rectangles in Area on Google Maps
本文介绍了在Google地图上绘制区域的矩形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Geometry API在Google地图上绘制一个区域。我想知道是否可以在动态大小的区域上绘制重复元素？
例如，如果我绘制区域如下所示：
然后，我希望能够点击下一步，并看到类似这样的东西，并在该区域绘制矩形，但前提是它们适合。即它们必须是完整矩形，而不是部分矩形： 唯一的问题是，我不完全确定如何去做这件事。我会使用HTML5
< canvas> ，但不幸的是，这需要尽可能地适合浏览器，但是如果它必须是< canvas> ;
抱歉让您等待。
好的，新代码如下。
您可以在 var boxSize = new google.maps.Size（10，20）;
$ b中指定小方块大小$ b
<！DOCTYPE html>
< html>
< head>
< script src =http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry>< / script>
< script type ='text / javascript'>
var mapCanvas，boxes = new google.maps.MVCArray（）;
函数initialize（）{
var mapDiv = document.getElementById（map_canvas）;
mapCanvas = new google.maps.Map（mapDiv，{
center：new google.maps.LatLng（37.422191，-122.084585），
mapTypeId：google.maps.MapTypeId.SATELLITE，
zoom：19，
tilt：0
}）;
//编码路径
var encodedPath =eblcFnuchVv @ D @ q @ P？a @ eD] AC @@ b @ DCz @ a @ A;
var points = google.maps.geometry.encoding.decodePath（encodedPath）;
//绘制一个多边形
var polygonOpts = {
paths：points，
strokeWeight：6，
strokeColor：＃FF0000，
strokeOpacity：1，
// fillColor：blue，
fillOpacity：0，
map：mapCanvas，
editable：true
};
var poly = new google.maps.Polygon（polygonOpts）;
var proc = function（）{
onPolygonComplete（poly）;
};
google.maps.event.addListener（mapCanvas，projection_changed，proc）;
google.maps.event.addListener（poly.getPath（），'insert_at'，proc）;
google.maps.event.addListener（poly.getPath（），'remove_at'，proc）;
google.maps.event.addListener（poly.getPath（），'set_at'，proc）;
}
function onDrawMgr_complete（polygon）{
var path = polygon.getPath（）;
console.log（google.maps.geometry.encoding.encodePath（path））;
函数onPolygonComplete（多边形）{
var边界，路径，sw，ne，ystep，xstep，boxH，boxW，posArry，flag，pos，x，y，我，盒子;
//删除旧盒子。
boxes.forEach（function（box，i）{
box.setMap（null）;
delete box;
}）;
//计算包含整个多边形的边界。
bounds = new google.maps.LatLngBounds（）;
paths = polygon.getPath（）;
paths.forEach（function（latlng，i）{
bounds.extend（latlng）;
}）;
var projection = mapCanvas.getProjection（）;
var zoom = mapCanvas.getZoom（）;
var powBase = Math.pow（2，zoom）;
//计算小方块大小。
sw = bounds.getSouthWest（）;
ne = bounds.getNorthEast（）;
var swPoint = projection.fromLatLngToPoint（sw）;
var nePoint = projection.fromLatLngToPoint（ne）;
var boxSize = new google.maps.Size（10，20）; //以像素为单位。
boxSize.width / = powBase;
boxSize.height / = powBase;
var maxX = Math.floor（Math.abs（（swPoint.x - nePoint.x））/ boxSize.width）;
var maxY = Math.floor（Math.abs（（swPoint.y - nePoint.y））/ boxSize.height）; （x = 0; x
bounds = new google.maps.LatLngBounds（）;
posArry = [];
posArry.push（new google.maps.Point（swPoint.x + boxSize.width * x，swPoint.y - boxSize.height * y））;
posArry.push（new google.maps.Point（swPoint.x + boxSize.width * x，swPoint.y - boxSize.height *（y + 1）））;
posArry.push（new google.maps.Point（swPoint.x + boxSize.width *（x + 1），swPoint.y - boxSize.height * y））;
posArry.push（new google.maps.Point（swPoint.x + boxSize.width *（x + 1），swPoint.y - boxSize.height *（y + 1）））;
var flag = true;
for（var i = 0; i< posArry.length; i ++）{
pos = projection.fromPointToLatLng（posArry [i]）;
if（flag）{
flag = google.maps.geometry.poly.containsLocation（pos，polygon）;
bounds.extend（pos）;
if（flag）{
box = new google.maps.Rectangle（{
bounds：bounds，
map ：mapCanvas，
strokeColor：'green'，
strokeOpacity：1，
strokeWeight：1，
fillColor：'yellow'，
fillOpacity：0.5，
可点击：false
}）;
boxes.push（box）;
$ b google.maps.event.addDomListener（window，load，initialize）;
< / script>
< style type =text / css>
窗口，html，＃map_canvas {
width：700px;
height：500px;
}
< / style>
< / head>
< body>
< div id =map_canvas/>
< / body>
< / html>
I'm drawing an area on Google Maps using the Geometry API. I want to know if it is possible to draw a repeating element onto an area that is dynamic in size?
For example, if I draw my area to look like this:
Then I want to be able to hit 'Next Step' and see something like this, with the rectangles drawn in the area, but only if they will fit. i.e., they have to be 'full' rectangles, not part rectangles:
The only problem is, I'm not entirely sure how to go about this. I would use HTML5 <canvas> but unfortunately, this needs to be as browser-friendly as possible, but if it has to be <canvas> then so be it!
解决方案
@Joshua M
Sorry for keeping you wait.
Ok, the new code is below.
You can specify the small box size at var boxSize = new google.maps.Size(10, 20);
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type='text/javascript'>
var mapCanvas, boxes = new google.maps.MVCArray();
function initialize() {
var mapDiv = document.getElementById("map_canvas");
mapCanvas = new google.maps.Map(mapDiv, {
center : new google.maps.LatLng(37.422191,-122.084585),
mapTypeId : google.maps.MapTypeId.SATELLITE,
zoom : 19,
tilt : 0
});
//Encoded path
var encodedPath = "eblcFnuchVv@D@q@P?a@eD]AC~@b@DCz@a@A";
var points = google.maps.geometry.encoding.decodePath(encodedPath);
//Draw a polygon
var polygonOpts = {
paths : points,
strokeWeight : 6,
strokeColor : "#FF0000",
strokeOpacity : 1,
//fillColor : "blue",
fillOpacity : 0,
map : mapCanvas,
editable : true
};
var poly = new google.maps.Polygon(polygonOpts);
var proc = function() {
onPolygonComplete(poly);
};
google.maps.event.addListener(mapCanvas, "projection_changed", proc);
google.maps.event.addListener(poly.getPath(), 'insert_at', proc);
google.maps.event.addListener(poly.getPath(), 'remove_at', proc);
google.maps.event.addListener(poly.getPath(), 'set_at', proc);
}
function onDrawMgr_complete(polygon) {
var path = polygon.getPath();
console.log(google.maps.geometry.encoding.encodePath(path));
}
function onPolygonComplete(polygon) {
var bounds, paths, sw, ne, ystep, xstep, boxH, boxW, posArry, flag, pos, x, y, i, box;
//Delete old boxes.
boxes.forEach(function(box, i) {
box.setMap(null);
delete box;
});
//Calculate the bounds that contains entire polygon.
bounds = new google.maps.LatLngBounds();
paths = polygon.getPath();
paths.forEach(function(latlng, i) {
bounds.extend(latlng);
});
var projection = mapCanvas.getProjection();
var zoom = mapCanvas.getZoom();
var powBase = Math.pow(2, zoom);
//Calculate the small box size.
sw = bounds.getSouthWest();
ne = bounds.getNorthEast();
var swPoint = projection.fromLatLngToPoint(sw);
var nePoint = projection.fromLatLngToPoint(ne);
var boxSize = new google.maps.Size(10, 20); //in pixels.
boxSize.width /= powBase;
boxSize.height /= powBase;
var maxX = Math.floor(Math.abs((swPoint.x - nePoint.x)) / boxSize.width);
var maxY = Math.floor(Math.abs((swPoint.y - nePoint.y)) / boxSize.height);
for ( y = 0; y < maxY; y++) {
for (x = 0; x < maxX; x++) {
//Detect that polygon is able to contain a small box.
bounds = new google.maps.LatLngBounds();
posArry = [];
posArry.push(new google.maps.Point(swPoint.x + boxSize.width * x, swPoint.y - boxSize.height * y));
posArry.push(new google.maps.Point(swPoint.x + boxSize.width * x, swPoint.y - boxSize.height * (y + 1)));
posArry.push(new google.maps.Point(swPoint.x + boxSize.width * (x + 1), swPoint.y - boxSize.height * y));
posArry.push(new google.maps.Point(swPoint.x + boxSize.width * (x + 1), swPoint.y - boxSize.height * (y + 1)));
var flag = true;
for (var i = 0; i < posArry.length; i++) {
pos = projection.fromPointToLatLng(posArry[i]);
if (flag) {
flag = google.maps.geometry.poly.containsLocation(pos, polygon);
bounds.extend(pos);
}
}
if (flag) {
box = new google.maps.Rectangle({
bounds : bounds,
map : mapCanvas,
strokeColor : 'green',
strokeOpacity : 1,
strokeWeight : 1,
fillColor : 'yellow',
fillOpacity : 0.5,
clickable : false
});
boxes.push(box);
}
}
}
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
<style type="text/css">
window,html,#map_canvas{
width : 700px;
height : 500px;
}
</style>
</head>
<body>
<div id="map_canvas"/>
</body>
</html>
这篇关于在Google地图上绘制区域的矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
