点击时捕获Google地图折线（每开始/结束） [英] Capture Google Maps Polyline On Click (Per Start/End)

问题描述

我目前正在为我们的客户使用Google Maps V3，他们要求我们实施一种绘图工具，让他们创建连接的线条流并计算距离。然而，看起来谷歌地图V3绘图管理器库的方式非常有限，它使我们能够捕捉多段线的点击事件。

我们的代码<
$ b $ pre $ lt; code> google.maps.event.addListener（map，'click'，function（event）{
/ / TODO：稍后存储纬度/点击距离以计算距离
}）;

google.maps.event.addListener（drawingManager，'overlaycomplete'，function（e）{
// TODO：显示行的总距离
}）;

目标

  google.maps.event.addListener（drawingManager，'polylineclick'，函数（事件）{
 // TODO：存储距离计算和显示行的经纬度更新的距离。
}）; 
  

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

另外，我知道我们可以通过创建自定义处理程序来模仿这一点，地图的点击方式以及在经纬图之间手动绘制线条，但Google Maps API不会为其绘图管理器提供点击方法，这似乎很奇怪。

澄清

最终目标是在绘制折线时具有功能，我们可以动态显示折线的总长度。 I.E.我开始画一条线，出现一段显示Total Line is X，我点击第二个点创建第二行，文本更新为x+y，点击第三个，然后更新为x+y+z等，这就是为什么我们希望有一个事件来处理lineDrawn或polylineClick来存储这些纬度/长度，我们可以计算动态创建线的长度，而无需

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

解决方案

基本上你想链接在一起，像这样：

  var thePolyLine = new google。 maps.Polyline（{
 polyLineOptions 
}）.setMap（map）.addListener（click，function（event）{
 
 //点击事件
 
}）; 
  

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

好吧，我显然完全没有读过OP的问题。

外表就像 markercomplete 事件返回一个标记。我会创建一个标记对象的全局数组，然后您可以在每个捕获该事件之间运行距离检查。

  var markers = new Array（）; 
 
 google.maps.event.addListener（theDrawingManager，markercomplete，function（marker）{
 markers.push（marker）; 
}）; 
  

然后，您可以遍历它们，并且 computeDistanceBetween 任何或所有点数。

=============编辑＃2 ============ =

我的小提琴解决方案！ （我用更多评论更新了代码并修正了一个错误，很明显距离是以米为单位）： / 8Xqaw / 12 /rel =nofollow> http://jsfiddle.net/8Xqaw/12/

右键单击要添加的地图指向度量。
距离以米为单位，顺便说一句。当你拖动点时它也会更新距离。对于polyLine本身有一个点击功能。

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

Description

I am currently working with Google Maps V3 for our client and they've asked us to implement a drawing tool that will allow them to create connected stream of lines and calculate the distance. However, it seems the Google Maps V3 Drawing Manager library is very limited in how it allows us to capture the click events for a polyline.

Our Code

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

The Goal

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

As you can see, we want to capture the lat/long as the user is creating the polyline and display the distance as each line is created, not once the entire polyline is completed.

Also, I know we can imitate this by creating custom handlers and doing some magic with the map's click method and drawing lines manually between lat/longs, but it seems weird that the Google Maps API wouldn't have a click method for their Drawing Manager.

Clarification

The end goal is to have functionality so while drawing a polyline, we can display the total length of the polyline dynamically. I.E. I begin by drawing a line, a section appears that says "Total Line is X", I click a second spot to create a second line and the text updates to "x" + "y", I click a third and it updates to "x" + "y" + "z", etc. This is why we were hoping there is an event to handle "lineDrawn" or "polylineClick" to store these lat/longs to we can calculate the length for dynamically created lines without having the user stop drawing lines to see the total length.

Edit: Updated addListener in Our Goal to use drawingManager, not map.

Edit: Addition of Clarification section.

解决方案

Basically you want to chain the two together like this:

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

    //click event

});

============= EDIT =============

Ok, I clearly didn't read the OP's question entirely.

Looks like the markercomplete event returns a marker. I'd create a global Array of marker objects, then you can run a distance check between each on catching that event.

var markers = new Array();

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

Then, you can loop through them, and computeDistanceBetween any or all points.

============= EDIT #2 =============

My Fiddle of the solution! (I updated the code with more comments and fixed an error, made it obvious that distance is in meters):

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

Right-click the map to add points to measure. Distance is in meters, btw. It will update distance when you drag points, too. And there is a click function for the polyLine itself.

Clicking the first point again will allow you to connect the final point with the first point to create a polygon, then you can click and drag to move the polygon around (which moves the points as well)...

这篇关于点击时捕获Google地图折线（每开始/结束）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！