3

描述

我目前正在为我们的客户使用 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 我从画一条线开始，出现一个显示“总线为 X”的部分，我单击第二个点创建第二行，文本更新为“x”+“y”，单击第三个并更新到“x”+“y”+“z”等。这就是为什么我们希望有一个事件来处理“lineDrawn”或“polylineClick”来存储这些纬度/经度，以便我们可以计算动态创建的线的长度无需用户停止画线以查看总长度。

编辑：更新了我们的目标中的 addListener以使用绘图管理器，而不是地图。

编辑：添加澄清部分。

4

2 回答 2

6

基本上你想像这样将两者链接在一起：

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/

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

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

于 2014-05-27T15:18:09.847 回答
0

试试这个：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);
});
于 2014-05-27T20:06:47.323 回答