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

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

此外，我知道我们可以通过创建自定义处理程序并使用地图的点击方法和在纬度/长度之间手动绘制线条来做一些魔术来模仿这一点，但谷歌地图API并不会让人感到奇怪。他们的绘图管理器有一个点击方法。

澄清

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

编辑：更新我们的目标中的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功能。

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

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

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

2 个答案: