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

How can i set rectangle size in google map?

本文关键字:设置 谷歌地图      更新时间:2023-09-26

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

我想把它的尺寸设置为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/

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

假设你有一个想要的矩形中心(其他点也有可能,如西南、东北等):

使用几何图形库计算距给定中心的距离以创建边界。

示例功能:

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/