Question

我在网页上有一张地图，我希望能够添加一个特定大小的矩形。目前完成如下。

var rectangle = new google.maps.Rectangle({
        strokeColor: '#FF0000',
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        bounds: {
            north: 33.685,
            south: 33.671,
            east: -116.224,
            west: -116.251
        }
    });

是否可以使用尺寸而不是坐标向Google地图添加矩形？

例如，假设我想在地图上绘制一个250英尺高x 600英尺宽的矩形？

由于

Answer 1

您需要根据尺寸（以及位置点，中心或已知顶点）计算坐标。您可以使用几何库执行此操作。

$_POST

proof of concept fiddle

代码段

＆＃13;

// 250ft high x 600ft wide
// 1 ft = 0.3048 meters
var rectBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(
    google.maps.geometry.spherical.computeOffset(map.getCenter(), 250*0.3048, 180).lat(), // south
    google.maps.geometry.spherical.computeOffset(map.getCenter(), 600*0.3048, 270).lng()), // west
  map.getCenter() /* NE */);
var rectangle = new google.maps.Rectangle({
map: map,
bounds: rectBounds
});

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  // 250ft high x 600ft wide
  // 1 ft = 0.3048 meters
  var rectBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(
      google.maps.geometry.spherical.computeOffset(map.getCenter(), 250 * 0.3048, 180).lat(), // south
      google.maps.geometry.spherical.computeOffset(map.getCenter(), 600 * 0.3048, 270).lng()), // west
    map.getCenter() /* NE */ );
  var rectangle = new google.maps.Rectangle({
    map: map,
    bounds: rectBounds
  });

}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

使用尺寸而非LatLon

1 个答案: