点击时捕获谷歌地图折线（每个开始/结束）答案

【问题标题】：Capture Google Maps Polyline On Click (Per Start/End)点击时捕获谷歌地图折线（每个开始/结束）
【发布时间】：2014-05-27 15:12:44
【问题描述】：

说明

我目前正在为我们的客户使用 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.
        });

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

另外，我知道我们可以通过创建自定义处理程序并使用地图的 click 方法和在纬度/经度之间手动绘制线条来模仿这一点，但 Google Maps API 没有 click 方法似乎很奇怪他们的绘图经理。

澄清

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

编辑：更新了 Our Goal 中的 addListener 以使用 drawingManager，而不是 map。

编辑：添加澄清部分。

【问题讨论】：

您能否提供创建折线的代码？
我们目前正在让 Google Maps V3 为我们做这件事。我们还没有手动创建它，我想避免从头开始使用纬度/经度创建折线，而是让谷歌地图为我们完成这项工作。
啊，markercomplete 事件呢？
不幸的是，markercomplete 事件仅在标记完成时触发，而不是折线。另一种选择是 polylinecomplete，但它不允许我们在用户添加时动态显示每条线的距离。
你的意思是this？

标签： javascript google-maps google-maps-api-3 google-maps-markers graph-drawing

【解决方案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 =============

我的解决方案！（我用更多的 cmets 更新了代码并修复了一个错误，很明显距离以米为单位）：

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

右键单击地图以添加要测量的点。距离以米为单位，顺便说一句。当您拖动点时，它也会更新距离。并且折线本身有一个点击功能。

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

【讨论】：

这会去哪里？我知道您在做什么，但是当用户创建折线时，我们如何捕获该事件以添加侦听器？
如果您监听 DrawingManager 的 markercomplete 函数，这行得通吗？检查我的编辑。
这有点多，但您可以为折线上的每个点添加标记。然后，使标记可拖动，当你放下它们时，更新相应的折线点。这样它是可编辑的，并且每次添加时都会触发一个“markercomplete”方法。
我不明白你为什么不手动创建折线......让我来做个小提琴。
哦哇...这实际上是完美的。我会仔细看看你做了什么，但这会奏效。

【解决方案2】：

试试这个：3

var PolylineOption = {
        strokeColor : "blue",
        strokeOpacity : 0.5,
        strokeWeight : 5
};
var Display;
var rendererOptions = {
    draggable : true,
    suppressMarkers : true,
    polylineOptions : PolylineOption
};
var Service = new google.maps.DirectionsService();
Display = new google.maps.DirectionsRenderer(this.rendererOptions);
Display.setMap(map);
Service.route(this.request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        Display.setDirections(response);                
    }
});

google.maps.event.addListener(PolylineOption, 'click', function() {
    alert(this.strokeColor);
});

【讨论】：