如何在谷歌地图中设置矩形大小?

时间:2014-09-02 06:51:49

标签: javascript google-maps

我正在使用谷歌地图的坐标创建矩形。

我想将其大小设置为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);

小提琴示例:http://jsfiddle.net/cnuu7rtL/4/

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

1 个答案:

答案 0 :(得分: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/