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

debugcn 发表于 Dev

莫娜编码器

我正在做这个演示。为什么我收到此错误：

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>

地理编码

您收到错误消息：“overlay.getBounds 不是函数”，因为overlay.getBounds()它不是函数。overlay不是 a 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));
});

更新的小提琴

代码片段：

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

}

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。