如何从Google Maps JavaScript API V3获取用户形状并进行分析

Question

在我当前正在工作的项目上，我要求用户在地图上搜索位置。 当用户找到位置时，他/她需要在需要其信息的区域上绘制一个矩形。 例如，如何获取在地图上绘制的shape(rectangle) as object ，因此可以使用getNorthEast() ， getSouthWest()并获取对象的正确坐标？

我一直在尝试的是：

 google.maps.event.addListener(drawingManager, 'dragend', function(e) { if (e.type == google.maps.drawing.OverlayType.RECTANGLE) { // Send bounds. var rectangleShape = e.overlay; rectangleShape.type = e.type; // var coordinate = rectangleShape.getNorthEast(); -- Won't allow me to use it. // var coordinate = rectangleShape.getBounds().getNorthEast(); -- Won't allow me to use it too. } }); 

但是，正如我在代码中所写的那样，它不允许我使用那些方法，这意味着我做错了什么。 有什么想法/代码可以与我分享以解决此问题吗？

编辑：里面的drawingManager

 var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.RECTANGLE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE ] }, rectangleOptions: { editable:true, draggable:true, geodesic:true } }); 

编辑2：在@MrUpsidown答案中，我问他如何在地图上移动矩形或调整大小后如何捕获矩形上的bounds_changed事件。

因此，如果有人需要实现此目标，则这是答案：

 google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(event) { google.maps.event.addListener(event, 'bounds_changed', function(){ if (event.type == google.maps.drawing.OverlayType.RECTANGLE) { var bounds = event.getBounds(); // Here are the new bounds after moving the rectangle around or resizing it. // Rest of the code here. } }); 

检查@MrUpsidown的已编辑帖子， @MrUpsidown了解另一种解决方法。

问候，德扬

Answer 1

如果要覆盖的范围，请执行以下操作：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {

    var bounds = event.overlay.getBounds();
});

然后可以使用bounds.getNorthEast(); 等等

编辑：回答您的第二个问题：听更多事件的一种简单方法是将覆盖图绘制成google.maps.Rectangle后：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {

    // Get shape bounds
    var bounds = event.overlay.getBounds();

    // Remove overlay from map
    event.overlay.setMap(null);

    // Create a rectangle here with the overlay bounds
});

JSFiddle演示

Answer 2

var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();

您可以使用.lat（）和.lng（）获得纬度和经度，如下所示：

var contentString = '<b>Rectangle moved.</b><br>' +
  'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' +
  'New south-west corner: ' + sw.lat() + ', ' + sw.lng();