谷歌地图用户可编辑多边形

Question

使用 Google maps API V3，特别是使用绘图工具（仅启用矩形），如下所示：

https://developers.google.com/maps/documentation/javascript/overlays#drawing_tools

但我有以下问题，

1. 我可以（如果可以的话），通过用户点击同一页面上的链接的动作，检索多边形左上角和右下角的纬度，经度，并发送到一个网址，即；

http://foo.bar/script.php?latoftopleft=17.4479216&longoftopleft=78.37720100000001&latofbotright=17.443172404867163&longofbotright=78.39395944192506

Answer 1

检索矩形

检索用户绘制的矩形的一种方法是使用Drawing Events：

var rectangle;
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(newRect) {
    rectangle = newRect;
});

每当用户绘制一个矩形时，它会将矩形覆盖对象分配给rectangle全局变量。

提取有关矩形的信息

google.maps.Rectangle class 有一个getBounds() 方法，它返回一个LatLngBounds 对象。可以使用getNorthEast()和getSouthWest()方法推导出左上角和右下角坐标。

您可以将onclick 事件绑定到链接。点击事件处理程序可能如下所示：

function clickEventHandler(event) {
    // check if the rectangle has been assigned
    if (rectangle == undefined) {
        alert('No rectangles have been drawn yet!');
        return;
    }

    // obtain the bounds and corner coordinates of the rectangle
    var rectangleBounds = rectangle.getBounds();
    var northEast = rectangleBounds.getNorthEast();
    var southWest = rectangleBounds.getSouthWest();

    // deduce the top-left and bottom-right corner coordinates
    var topLeft = new google.maps.LatLng(northEast.lat(), southWest.lng());
    var bottomRight = new google.maps.LatLng(southWest.lat(), northEast.lng());

    // Now that you have the coordinates, all you have to do is use an AJAX
    // technique of your choice to send the HTTP request to script.php.
    // ...
}

进一步阅读：

• How do I bind a click to an anchor without a framework (javascript)
• Pure Javascript send post data without a form