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

Question

在我目前工作的项目中，我要求用户在地图上搜索位置。当用户找到该位置时，he/she 需要在他需要信息的区域上绘制一个矩形。例如，如何获取在地图 as object 上绘制的 shape(rectangle)，以便我可以使用方法 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.
            }
        });

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

编辑： 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 的已编辑 post 以了解如何解决此问题的另一种方法。

此致，德扬

Answer 1

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

Answer 2

如果您想要叠加层的边界，请执行以下操作：

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 demo

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

How to get user's shape from Google Maps JavaScript API V3 and analyze it

javascript

google-maps

google-maps-api-3