在Google地图上的区域中绘制矩形

我正在使用Geometry API在Google地图上绘制一个区域。 我想知道是否可以在一个动态大小的区域上绘制重复元素？

例如，如果我绘制我的区域看起来像这样：

然后我希望能够点击“下一步”并看到这样的东西，在该区域绘制矩形，但只有它们适合。 即，它们必须是“完整”矩形，而不是部分矩形：

唯一的问题是，我不完全确定如何解决这个问题。 我会使用HTML5 但不幸的是，这需要尽可能的浏览器友好，但如果它必须是那么就这样吧！

Answer 1

@Joshua M.

抱歉让你久等了。 好的，新代码如下。 您可以在var boxSize = new google.maps.Size(10, 20);指定小方框大小var boxSize = new google.maps.Size(10, 20);

---

Answer 2

虽然我没有使用canvas，但这段代码怎么样？

 function onPolygonComplete(polygon) { var bounds, paths, sw, ne, ystep, xstep, boxH, boxW, posArry, flag, pos, x, y, i, box, maxBoxCnt; //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); }); //Calculate the small box size. maxBoxCnt = 8; sw = bounds.getSouthWest(); ne = bounds.getNorthEast(); ystep = Math.abs(sw.lat() - ne.lat()) / maxBoxCnt; boxH = Math.abs(sw.lat() - ne.lat()) / (maxBoxCnt + 1); xstep = Math.abs(sw.lng() - ne.lng()) / maxBoxCnt; boxW = Math.abs(sw.lng() - ne.lng()) / (maxBoxCnt + 1); for (y = 0; y < maxBoxCnt; y++) { for (x = 0; x < maxBoxCnt; x++) { //Detect that polygon is able to contain a small box. bounds = new google.maps.LatLngBounds(); posArry = []; posArry.push(new google.maps.LatLng(sw.lat() + ystep * y, sw.lng() + xstep * x)); posArry.push(new google.maps.LatLng(sw.lat() + ystep * y, sw.lng() + xstep * x + boxW)); posArry.push(new google.maps.LatLng(sw.lat() + ystep * y + boxH, sw.lng() + xstep * x)); posArry.push(new google.maps.LatLng(sw.lat() + ystep * y + boxH, sw.lng() + xstep * x + boxW)); flag = true; for (i = 0; i < posArry.length; i++) { pos = posArry[i]; if (flag) { flag = google.maps.geometry.poly.containsLocation(pos, polygon); bounds.extend(pos); } } //Draw a small box. if (flag) { box = new google.maps.Rectangle({ bounds : bounds, map : mapCanvas, strokeColor: '#00ffff', strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#00ffff', fillOpacity : 0.5, clickable: false }); boxes.push(box); } } } } 

此代码的工作方式与此图像类似

我写了一个解释代码的页面。 http://googlemaps.googlermania.com/google_maps_api_v3/en/poly_containsLocation.html