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

Posted 2023-02-27

【中文标题】谷歌地图用户可编辑多边形

【英文标题】：Google maps user editable polygon

【发布时间】：2012-09-28 10:01:56

【问题描述】：

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

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

但我有以下问题，

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

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

【参考方案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

【讨论】：

没有让代码使用.. 调用脚本

是否有任何 JavaScript 错误？如果您使用 jsFiddle 之类的方式发布代码也可能会有所帮助。

啊，你说的是矩形类，我用的是绘图工具，我可以用矩形类但是需要代码：找出当前显示的地图的中心并放置一个矩形在用户点击外部链接时在它的中间。

即使您使用绘图工具，您仍然可以通过侦听 API 提供的rectanglecomplete 事件来获取所绘制内容的 Rectangle 实例。我已更新我的答案以包含此内容。

这就是票！花了一点整理来解决我的无知，大声笑。这完美无缺。谢谢！！