javascript - 如何在谷歌地图中设置矩形大小？

Question

我正在使用 Google map 坐标创建矩形。

我想将其大小设置为 75 米(宽度和高度等于 75)。

这是我的代码:

function initialize() { 

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 20,
    center: new google.maps.LatLng(40.626805, -89.539396),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

var rectangle = new google.maps.Rectangle({ 
    strokeColor: 'green',
    strokeOpacity: 12,   
    strokeWeight: 12,     
    fillColor: 'green',  
    fillOpacity: 12,    
    map: map,   
    bounds: new google.maps.LatLngBounds(
    new google.maps.LatLng(40.626805, -89.539396),
    new google.maps.LatLng(40.626055, -89.538507))   
    });     

}

google.maps.event.addDomListener(window, 'load', initialize);

fiddle 示例:http://jsfiddle.net/cnuu7rtL/4/

请告诉我如何在谷歌地图中设置矩形大小？

Answer 1

假设您有一个所需的矩形中心(西南、东北等其他点也是可能的):

使用geometry-library计算距给定中心的距离以创建边界。

示例函数:

function calcBounds(center, size) {
    var n = google.maps.geometry.spherical.computeOffset(center, size.height/2, 0).lat(),
    s = google.maps.geometry.spherical.computeOffset(center, size.height/2, 180).lat(),
    e = google.maps.geometry.spherical.computeOffset(center, size.width/2, 90).lng(),
    w = google.maps.geometry.spherical.computeOffset(center, size.width/2, 270).lng();
    return new google.maps.LatLngBounds(new google.maps.LatLng(s,w),
                                          new google.maps.LatLng(n,e))
}

用法:

new google.maps.Rectangle({bounds:calcBounds(new google.maps.LatLng(40.626805, 
                                                                    -89.539396),
                                             new google.maps.Size(75,75)),
                           map:map});

演示:http://jsfiddle.net/cnuu7rtL/7/