单击时捕获谷歌地图多段线(每个起点/终点）

Capture Google Maps Polyline On Click (Per Start/End)

本文关键字：起点 终点 段线 谷歌地图 单击      更新时间：2023-09-26

描述

我目前正在为我们的客户使用谷歌地图V3，他们要求我们实现一个绘图工具，允许他们创建连接的线流并计算距离。然而，Google Maps V3 Drawing Manager库似乎在如何捕捉多段线的单击事件方面非常有限。

我们的代码

        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.
        });

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

此外，我知道我们可以通过创建自定义处理程序来模仿这一点，并对地图的单击方法和在纬度/经度之间手动绘制线进行一些魔术操作，但谷歌地图API的绘图管理器没有单击方法，这似乎很奇怪。

澄清

最终目标是具有功能，以便在绘制多段线时，可以动态显示多段线的总长度。例如，我开始画一条线，出现一个部分，上面写着"Total line is X"，我点击第二个点创建第二条线，文本更新为"X"+"y"，我单击第三个点，它更新为"X"+"y"+"z"，等等。这就是为什么我们希望有一个事件来处理"lineDrawn"或"polylineClick"来存储这些lat/long。我们可以计算动态创建的线的长度，而不需要用户停止绘制线来查看总长度。

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

编辑：增加澄清部分

基本上，您希望像这样将两者链接在一起：

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本身有一个点击函数。

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

试试这个：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);
});
相关文章：