无法在地图上获得绘制矩形的界限

Question

请你看看this demo并告诉我为什么会这样做

  

overlay.getBounds不是函数

在尝试获取地图上的“绘制矩形”边界时？

var rectangle;
var map;
var drawingManager;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 44.5452,
      lng: -78.5389
    },
    zoom: 9
  });
  drawingManager = new google.maps.drawing.DrawingManager();
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
    rectangle = overlay;
    drawingManager.setOptions({
      drawingMode: null,
      drawingControl: false
    });
    
     var bounds = overlay.getBounds();
     var start = bounds.getNorthEast();
     var end = bounds.getSouthWest();
     console.log( start);
  });
}
google.maps.event.addDomListener(window, 'load', initMap);


function drawRec() {
  //Setting options for the Drawing Tool. In our case, enabling Polygon shape.
  if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
    rectangle.overlay.setMap(null);
  }
  drawingManager.setOptions({
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
    },
    rectangleOptions: {
      strokeColor: '#6c6c6c',
      strokeWeight: 3.5,
      fillColor: '#926239',
      fillOpacity: 0.6,
      editable: true,
      draggable: true
    }

  });
  drawingManager.setMap(map);

}

html,
body,
#map {
  height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<button onclick="drawRec();">Draw Rectangle</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>

Answer 1

您收到错误：＆＃34; overlay.getBounds不是函数＆＃34;，因为overlay.getBounds()不是函数。 overlay不是google.maps.Rectangle，但它具有overlay属性。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
  rectangle = overlay;
  drawingManager.setOptions({
    drawingMode: null,
    drawingControl: false
  });
  var bounds = overlay.overlay.getBounds();
  var start = bounds.getNorthEast();
  var end = bounds.getSouthWest();

  console.log(start.toUrlValue(6));
});

updated fiddle

代码段

＆＃13;

＆＃13;

var rectangle;
var map;
var drawingManager;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 44.5452,
      lng: -78.5389
    },
    zoom: 9
  });
  drawingManager = new google.maps.drawing.DrawingManager();
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
    rectangle = overlay;
    drawingManager.setOptions({
      drawingMode: null,
      drawingControl: false
    });
    var bounds = overlay.overlay.getBounds();
    var start = bounds.getNorthEast();
    var end = bounds.getSouthWest();

    console.log(bounds.toUrlValue(6));
  });
}
google.maps.event.addDomListener(window, 'load', initMap);


function drawRec() {
  //Setting options for the Drawing Tool. In our case, enabling Polygon shape.
  if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
    rectangle.overlay.setMap(null);
  }
  drawingManager.setOptions({
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
    },
    rectangleOptions: {
      strokeColor: '#6c6c6c',
      strokeWeight: 3.5,
      fillColor: '#926239',
      fillOpacity: 0.6,
      editable: true,
      draggable: true
    }

  });
  drawingManager.setMap(map);

}

＆＃13;

html,
body,
#map {
  height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<button onclick="drawRec();">Draw Rectangle</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查文档： https://developers.google.com/maps/documentation/javascript/drawinglayer#drawing_events

事件监听器中的overlay事件有两个属性：

• 覆盖
• 型

因此，您需要将代码更改为以下内容：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlayEvent) {
    rectangle = overlayEvent.overlay;
    drawingManager.setOptions({
      drawingMode: null,
      drawingControl: false
    });

     var bounds = rectangle.getBounds();
     var start = bounds.getNorthEast();
     var end = bounds.getSouthWest();
});