在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地图中创建矩形

回答

相关问题