如何使用api V3在谷歌地图上设置多个矩形?

时间:2016-05-30 12:18:47

标签: jquery google-maps google-maps-api-3

这里我想在谷歌地图上显示多个矩形。矩形的西南和东北坐标从数据库中取出,每当用户在地图上绘制矩形并随后帮助该坐标显示矩形时,我就会添加到数据库

这里是代码init()函数。我能够显示一个矩形,但我想要多个,所以请帮助我如何实现

modprobe nvidia_uvm

下面的代码用于在地图上绘制矩形

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);

} 

另外我还想从地图中删除特定的矩形,所以请帮助我使用哪个功能就像用户点击特定的矩形和弹出窗口出来的删除按钮

1 个答案:

答案 0 :(得分:1)

我认为这个会帮助你

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中一样)而不是声明bounds和bounds1