如何疊加多個矩形

我有幾個緯度龍統籌用於指定周圍區域如框：如何疊加多個矩形

LATITUDE 26.664503840000002 29.145674380000003,LONGITUDE -96.27139215 -90.40762858

我看着繪製Rectangle的谷歌地圖覆蓋。

如果我想要爲不同緯度/經度疊加多個矩形，我應該創建新的綁定對象並將其分配給疊加對象嗎？

function initialize() { 
    var 
    lat = 29.145674380000003, // Should I calcuate the center or 
           // can I use of the min/max co-ordinates 
    lng = -90.40762858; 
    zoom = 4; 
    // Basic 
    var MapOptions = { 
     zoom: zoom, 
     center: new google.maps.LatLng(lat, lng), 
     disableDefaultUI: true, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"),MapOptions); 
    var bounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(26.664503840000002, -96.27139215), 
     new google.maps.LatLng(29.145674380000003, -90.40762858) 
    ); 
    var overlay = new google.maps.Rectangle({ 
     map: map, 
     bounds: bounds, 
     strokeColor: "red", 
     strokeWeight: 1, 
    }); 
}

來源

2013-02-13 Yeshwanth Venkatesh

下面是如何動態地添加矩形的例子：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Google Maps JavaScript API v3 Example: Rectangle Simple</title> 
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
     function initialize() { 
     var map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 11, 
      center: new google.maps.LatLng(33.678176, -116.242568), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 

    var myBounds = new Array(); 
    myBounds[0] = new google.maps.LatLngBounds(
      new google.maps.LatLng(33.671068, -116.25128), 
      new google.maps.LatLng(33.685282, -116.233942)); 

    myBounds[1] = new google.maps.LatLngBounds(
      new google.maps.LatLng(33.671068, -116.25128), 
      new google.maps.LatLng(33.687282, -116.238942)); 
    myBounds[2] = new google.maps.LatLngBounds(
      new google.maps.LatLng(33.671068, -116.25128), 
      new google.maps.LatLng(33.688282, -116.238942)); 

    addRects(myBounds, map); 
     } 
    function addRects(bounds, map){ 
    for (var i=0; i<bounds.length; ++i) { 
     var overlay = new google.maps.Rectangle({ 
      map: map, 
      bounds: bounds[i], 
      strokeColor: "red", 
      strokeWeight: 1, 
     }); 
    } 
    } 

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

    </script> 

<style> 
#map_canvas { 
    width: 600px; 
    height: 400px; 
} 
</style> 
    </head> 

    <body> 
    <div id="map_canvas"></div> 
    </body> 

</html>

來源

2013-02-13 16:24:02

謝謝你能看看我的代碼..如果可能覆蓋多個矩形？ – 2013-02-13 16:28:58

將此添加到您的示例中以獲取第二個矩形。 – 2013-02-13 16:58:35

那麼沒有動態的方法來做到這一點？像推入數組中的所有邊界並傳遞數組對象來覆蓋？ – 2013-02-13 17:04:34

如果你看看linked sample的來源，它實際上提供了一個界限。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Google Maps JavaScript API v3 Example: Rectangle Simple</title> 
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
     function initialize() { 
     var map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 11, 
      center: new google.maps.LatLng(33.678176, -116.242568), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 

     var rectangle = new google.maps.Rectangle({ 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      map: map, 
      bounds: new google.maps.LatLngBounds(
      new google.maps.LatLng(33.671068, -116.25128), 
      new google.maps.LatLng(33.685282, -116.233942)) 
     }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    </body> 
</html>

Working example with your coordinates

來源

2013-02-13 15:57:28 geocodezip

感謝您的回答...我還創建了一個工作示例:)我想知道中心。地圖的中心還是矩形的中心？ – 2013-02-13 16:17:07

如何疊加多個矩形 – 2013-02-13 16:53:42

複製var矩形（最好給每個不同的名稱）並更改邊界。 – geocodezip 2013-02-13 17:06:56

如何疊加多個矩形

回答

相關問題