如何使用API V3在谷歌地圖上設置多個矩形？

這裏我想在谷歌地圖上顯示多個矩形。矩形的西南和東北座標從數據庫中提取，我添加到數據庫，無論用戶在地圖上繪製矩形和隨後幫助顯示矩形的座標如何使用API V3在谷歌地圖上設置多個矩形？

下面的代碼init（）函數。在我能夠顯示一個矩形，但我想多所以請幫助我，我怎麼能做到這一點

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(44.5452, -78.5389), 
     zoom: 9 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 


     var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(39.9602803542957, -75.179443359375), 
      new google.maps.LatLng(40.697299008636755, -74.00390625) 

     ); 

     var rectangle=new google.maps.Rectangle({ 
       bounds:bounds, 
       strokeColor : '#6c6c6c', 
       strokeWeight : 3.5, 
       fillColor : '#926239', 
       fillOpacity : 0.6 
       }); 

      rectangle.setMap(map); 

}

下面的代碼是抽獎長方形地圖

function drawRec() { 

     drawingManager.setOptions({ 
      drawingMode : google.maps.drawing.OverlayType.RECTANGLE, 
      drawingControl : true, 
      drawingControlOptions : { 
       position : google.maps.ControlPosition.TOP_CENTER, 
       drawingModes : [ google.maps.drawing.OverlayType.RECTANGLE ] 
      }, 
      rectangleOptions : { 
       strokeColor : '#6c6c6c', 
       strokeWeight : 3.5, 
       fillColor : '#926239', 
       fillOpacity : 0.6, 
       editable: false, 
       draggable: false 
      } 
     }); 

     // Loading the drawing Tool in the Map. 
     drawingManager.setMap(map); 

google.maps.event.addListener(drawingManager,'rectanglecomplete',getlatlong); 


}

另外我也想從地圖中刪除特定的矩形區域，請幫我該功能用於像：在某矩形和彈出用戶點擊與刪除按鈕出來

來源

2016-05-30 Meghna

你就不能創建另一個矩形就像你創建第一個矩形一樣？在一個循環或任何適合您的需求？要刪除一個矩形，使用'setMap（null）'而不是'setMap（map）'。 – MrUpsidown

順便說一句。你的問題太**了**。作爲一個快速提示，你提到用戶繪製存儲在數據庫中的形狀和形狀。我認爲你應該採取兩種不同的方法：1）讓用戶繪製形狀（drawingManager）和2）繪製存儲在數據庫中的形狀（[Rectangle class]（https://developers.google.com/maps/documentation/javascript） /參考＃矩形））。 – MrUpsidown

我認爲，這將幫助你

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(44.5452, -78.5389), 
     zoom: 9 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 


     var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(39.9602803542957, -75.179443359375), 
      new google.maps.LatLng(40.697299008636755, -74.00390625) 

     ); 

     var rectangle=new google.maps.Rectangle({ 
       bounds:bounds, 
       strokeColor : '#6c6c6c', 
       strokeWeight : 3.5, 
       fillColor : '#926239', 
       fillOpacity : 0.6 
       }); 

      rectangle.setMap(map); 

     google.maps.event.addListener(rectangle, 'click', function() { 
      var contentString = '<br/><b>Hiiii</b>'; 
      infoWindow.setContent(contentString); 
      infoWindow.open(map); 
     }); 

     /*-------create another bounds ---------------*/  
     var bounds1 = new google.maps.LatLngBounds(
      new google.maps.LatLng(39.9602803542957, -75.179443359375), 
      new google.maps.LatLng(40.697299008636755, -74.00390625) 

     ); 

     var rectangle1=new google.maps.Rectangle({ 
       bounds:bounds1, 
       strokeColor : '#6c6c6c', 
       strokeWeight : 3.5, 
       fillColor : '#926239', 
       fillOpacity : 0.6 
       }); 

      rectangle1.setMap(map); 

     google.maps.event.addListener(rectangle1, 'click', function() { 
      var contentString1 = '<br/><b>Hiiii</b>'; 
      infoWindow.setContent(contentString1); 
      infoWindow.open(map); 
     }); 

}

我不知道在你的語言會實現它，但如果你有動態數據，那麼你可以在這裏辦理環（像在PHP），而不是申報範圍和bounds1

來源

2016-06-01 11:53:58

如何使用API​​ V3在谷歌地圖上設置多個矩形？

回答

相關問題

如何使用API V3在谷歌地圖上設置多個矩形？