Question

请你看一下this Demo，让我知道如何在放大finshed之后清除矩形（不是标记）。

我已经尝试将map.setMap(null);添加到rectanglecomplete但是它不起作用我认为这可能会删除所有绘制甚至是地图中我不想做的标记

    google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
            map.fitBounds(r.getBounds());
            map.setMap(null);
        });

更新

我也试过这个：

 var drawings = [];
 function deleteRect() {
        for (var i=0; i < drawings.length; i++)
        {
          drawings[i].overlay.setMap(null);
        }
        drawings = [];
      }
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
 drawings.push(r);
 map.fitBounds(r.getBounds());
 deleteRect()
});

但仍然没有成功，我得到了

未捕获的TypeError：无法读取属性＆＃39; setMap＆＃39;未定义的

在控制台中！

代码段

＆＃13;

var map;
var drawingManager
$(document).ready(function () {
    var latlng = new google.maps.LatLng(49.241943, -122.889318);
    var myOptions = {
        zoom: 12,
        center: latlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                   google.maps.drawing.OverlayType.RECTANGLE]
        }
    });
    google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
        map.fitBounds(r.getBounds());
    });
    drawingManager.setMap(map);

});

＆＃13;

body {
    padding-top:25px;
}
#map_canvas {
    width: 100%;
    height: 400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
<div class="container">
    <div class="well">
        <div id="map_canvas"></div>
    </div>
</div>

＆＃13;

Answer 1

您可以这样绘制透明矩形

 drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
               google.maps.drawing.OverlayType.RECTANGLE]
    },
        rectangleOptions: {
          fillColor: '#cccccc',
          fillOpacity: 0,
          strokeWeight: 5,
        }        
});

并删除矩形使用

google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
    map.fitBounds(r.getBounds());
    r.setMap(null);
});

像这样sample

仅清除矩形绘图（不标记）

1 个答案: