如何在绘制完成后放大绘图

Question

请您查看this Demo并告诉我如何在Google地图绘制后启用缩放进入地图？

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]
        }
    });
    drawingManager.setMap(map);

});

Answer 1

添加'rectanglecomplete'监听器：

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

updated fiddle

代码段

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

});

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

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