在Google地圖中創建矩形

我使用php和javascript在Google地圖中呈現一些矩形。如果我只創建一個，它完美的作品。如果我使用的Chrome越來越慢，我無法加載地圖。在Google地圖中創建矩形

下面是一些代碼：

<?php 
foreach($matrix as $rect) 
{ 
    print"<script> 

    var rectangle; 
    var map; 
    var infoWindow; 

    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(". $rect[0][0].", ". $rect[0][1]."), 
      zoom: 20 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

     var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(". $rect[2][0].", ". $rect[2][1]."), 
      new google.maps.LatLng(". $rect[1][0].", ". $rect[1][1].") 
     ); 

     rectangle = new google.maps.Rectangle({ 
      bounds: bounds//, 
      //editable: true//, 
      //draggable: true 
     }); 

     rectangle.setMap(map); 

     // Add an event listener on the rectangle. 
     google.maps.event.addListener(rectangle, 'bounds_changed', showNewRect); 

     // Define an info window on the map. 
     infoWindow = new google.maps.InfoWindow(); 
    } 

    function showNewRect(event) { 
     var ne = rectangle.getBounds().getNorthEast(); 
     var sw = rectangle.getBounds().getSouthWest(); 

     var contentString = '<b>Rectangle moved.</b><br>' + 
      'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' + 
      'New south-west corner: ' + sw.lat() + ', ' + sw.lng(); 

     // Set the info window's content and position. 
     infoWindow.setContent(contentString); 
     infoWindow.setPosition(ne); 

     infoWindow.open(map); 
    } 

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

    </script>"; 
?>

我不認爲我的代碼是錯誤的。所以問題是：我可以在同一個地圖上顯示多個矩形，還是必須使用多個地圖？

代碼從這裏：https://developers.google.com/maps/documentation/javascript/examples/rectangle-event

提前感謝！

來源

2015-06-29 Νίκος Διαμαντόγιαννης

這是錯誤的第一個明顯的事情：定義一個循環內的功能，這是完全懵了，這不是如何運作的工作。你做1個功能;使用參數使它們專門針對特定條件作出反應。 –

是的，你是對的！我也看到，我只得到我最後一個矩形不是全部。我會改變它並重新發布。謝謝@EmmanuelDelay –

修改後的示例，演示瞭如何渲染多個矩形對象

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

 
    var minPos = new google.maps.LatLng(49.25, -123.1); 
 
    var maxPos = new google.maps.LatLng(34.052234, -74.005973);  
 

 
    
 
    for(var i = 0; i < 16;i++) 
 
    { 
 
     var lat = getRandomInterval(minPos.lat(),maxPos.lat()); 
 
     var lng = getRandomInterval(minPos.lng(),maxPos.lng()); 
 
     
 
     var bounds = new google.maps.LatLngBounds(
 
      new google.maps.LatLng(lat, lng), 
 
      new google.maps.LatLng(lat + 1.5, lng + 4.0) 
 
     ); 
 
     showRect(map,bounds); 
 

 
    } 
 

 
} 
 

 
function showRect(map,bounds){ 
 

 
    // Define the rectangle and set its editable property to true. 
 
    var rectangle = new google.maps.Rectangle({ 
 
     bounds: bounds, 
 
     editable: true, 
 
     draggable: true 
 
    }); 
 
    rectangle.setMap(map); 
 
    return rectangle; 
 
} 
 

 
function getRandomInterval(min, max) { 
 
    return Math.random() * (max - min) + min; 
 
} 
 

 

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

html, body, #map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
 
<div id="map-canvas"></div>

來源

2015-06-29 14:26:10

在Google地圖中創建矩形

回答

相關問題