在点击时捕获Google地图折线(每个开始/结束)

Question

描述

我目前正在为我们的客户使用Google Maps V3,他们要求我们实施一个绘图工具,允许他们创建连接的线流并计算距离.但是,Google Maps V3图库管理器库似乎非常有限,它允许我们捕获折线的点击事件.

我们的守则

        google.maps.event.addListener(map, 'click', function(event){
            //TODO: Store lat/long of click for distance calculation later
        });

        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
            //TODO: Display the total distance of the line
        });

目标

        google.maps.event.addListener(drawingManager, 'polylineclick', function(event){
            //TODO: Store lat/long of line for distance calculation and display updated distance.
        });

如您所见,我们希望在用户创建折线时捕获纬度/经度,并在创建每条线时显示距离,而不是在整条折线完成后显示距离.

此外,我知道我们可以通过创建自定义处理程序并使用地图的点击方法做一些魔术并在纬度/长度之间手动绘制线条来模仿这一点,但Google Maps API没有针对其绘图管理器的点击方法似乎很奇怪.

澄清

最终目标是具有功能,因此在绘制折线时,我们可以动态显示折线的总长度.IE我首先绘制一条线,出现一个显示"Total Line is X"的部分,我点击第二个点创建第二行,文本更新为"x"+"y",我点击第三个并更新到"x"+"y"+"z"等.这就是为什么我们希望有一个事件来处理"lineDrawn"或"polylineClick"来存储这些纬度/长度,我们可以计算动态创建的线的长度没有用户停止绘制线条以查看总长度.

编辑:更新了我们目标中的 addListener 以使用drawingManager,而不是map.

编辑:添加澄清部分.

Answer 1

基本上你想把这两个链接起来像这样:

var thePolyLine = new google.maps.Polyline({ 
       polyLineOptions 
}).setMap(map).addListener("click", function(event){

    //click event

});

=============编辑=============

好吧,我显然没有完全阅读OP的问题.

看起来markercomplete事件会返回一个标记.我将创建一个全局的标记对象数组,然后您可以在捕获该事件的每个对象之间运行距离检查.

var markers = new Array();

google.maps.event.addListener(theDrawingManager, "markercomplete", function (marker) {
    markers.push(marker);
});

然后,您可以遍历它们,以及computeDistanceBetween任何或所有点.

=============编辑#2 =============

我解决方案的小提琴!(我用更多注释更新了代码并修复了错误,显然距离以米为单位):

http://jsfiddle.net/8Xqaw/12/

右键单击地图以添加要测量的点.距离以米为单位,顺便说一句.它也会在你拖动点时更新距离.并且polyLine本身有一个click功能.

再次单击第一个点将允许您将最终点与第一个点连接以创建多边形,然后您可以单击并拖动以移动多边形(这也会移动点)...