在谷歌地图中创建矩形

Creating Rectangles in google maps

本文关键字：创建 谷歌地图      更新时间：2023-09-26

我使用php和javascript在谷歌地图中显示一些矩形。如果我只创造一个，它就完美了。如果我使用更多的Chrome，速度会减慢，以至于我无法加载地图。

这里有一些代码：

<?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

提前感谢！

演示如何渲染多个矩形对象的修改示例

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>

相关文章：