从DirectionsRenderer获取来自折线或标记的事件 [英] Get events from polyline or marker from a DirectionsRenderer

问题描述

我使用DirectionsService和路线方法来生成DirectionsResult。我还使用DirectionsRenderer对象来显示结果，因为它非常易于使用。检测directions_changed事件没有问题，但我想知道是否可以从代表行程的折线中获取事件，甚至可以从拖动折线后生成标记（小圆圈）中的事件。

使用Google地图（maps.google.com，获取路线）时，您可以拖动多段线，右键点击它（或在标记上），这样可以显示菜单。所以我猜想有一种方法可以从DirectionsRenderer中捕获事件（假设Google在这种情况下使用此对象）。

如果有人有想法

解决方案

我也在为你的问题寻求答案。在此之前，我会尽力弄清楚自己，如果我找到有用的东西，我会回复。

更新：在JavaScript中几分钟后，我发现out DirectionsResult 对象包含一个路标点数组，包括用光标拖动路径时创建的点。如果您已完成可拖拽指南教程，则可以访问对象通过directionsDisplay.directions，在 directions_changed 事件的回调方法内。该对象包含一个名为 sf 的成员，如果存在任何（如果不是），则为 waypoints 数组的成员为空。此数组的每个成员都包含一个名为 location 的成员，它将 wa （纬度）和 ya （经度）下的坐标存储起来。为了演示航点的处理，我写了一个小功能，在航点上显示标记。为了测试它，将以下全局变量添加到脚本中;

  var markers = []; 
  

修改 directions_changed 事件回调函数

  google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
 computeTotalDistance（directionsDisplay.directions）; 
} ）; 
  

转换为以下内容;

  google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
 computeTotalDistance（directionsDisplay.directions）; 
 displayWaypoints（directionsDisplay.directions）; 
}）; 
  

并添加此函数

<$ p $对于（var i = 0; i< markers.length; ++ i）{
markers [i] .setMap（null）的函数displayWaypoints（result）{
） ;
}
markers = [];
if（result.sf.waypoints）{
for（var i = 0; i< result.sf.waypoints.length; ++ i）{
var latitude = result.sf .waypoints [I] .location.wa;
var longitude = result.sf.waypoints [i] .location.ya;
markers.push（new google.maps.Marker（{
position：new google.maps.LatLng（latitude，longitude），
map：map
}））;
}
}
}

您可能还想压制DirectionsRenderer的内置标记图。
替换

  var rendererOptions = {
 draggable：true 
}; 
  

加入以下内容：

  var rendererOptions = {
 draggable：true，
 suppressMarkers：true 
}; 
  

我找不到任何对 sf 成员的官方引用。使用它需要您自担风险，Google可能会在不做进一步通知的情况下修改API。直到他们制作了一个公共的API来处理拖拽指令后的航点，我想不出一个更好的解决方案。

这是我的第一个Stack Overflow答案，希望对我有帮助。

亲切的问候，
Johnny

I'm using the DirectionsService and the route method to generate a DirectionsResult. I'm also using the DirectionsRenderer object to display results because it's very easy to use. I've no problem detecting directions_changed events, but I would like to know if it's possible do get events from the polyline representing the itinerary, or even, events from markers (small circles) generated after dragging the polyline.

When using google maps (maps.google.com, "Get Directions"), you can drag the polyline, right click on it (or on markers), this has the effect to display a menu. So I guess there is a way to catch events from DirectionsRenderer (supposing Google use this object in that case).

If anybody got an idea

解决方案

I'm also seeking answer for your question. Until then, I'll try to figure it out myself and I'll post back if I find something useful.

Update: after a few minutes in JavaScript, I found out that the DirectionsResult object holds an array of waypoints, including the ones created when the path is dragged with the cursor. If you completed the Draggable Directions tutorial you can access that object via directionsDisplay.directions, inside the callback method for the directions_changed event. That object holds a member named sf which holds a waypoints array if there are any, if not, it's null. Each member of this array contains a member named location, storing the coordinates under wa (latitude) and ya (longitude).

To demonstrate the waypoint handling, I wrote a little function which displays markers in the place of waypoints. In order to test it, add the following global variable to the script;

var markers = [];  

modify the directions_changed event callback function

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {  
    computeTotalDistance(directionsDisplay.directions);  
});

to the following;

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {  
    computeTotalDistance(directionsDisplay.directions);  
    displayWaypoints(directionsDisplay.directions);  
});

and add this function too

function displayWaypoints(result) {  
    for (var i = 0; i < markers.length; ++i) {  
        markers[i].setMap(null);  
    }  
    markers = [];  
    if (result.sf.waypoints) {  
            for (var i = 0; i < result.sf.waypoints.length; ++i) {  
                    var latitude = result.sf.waypoints[i].location.wa;  
                    var longitude = result.sf.waypoints[i].location.ya;    
                    markers.push(new google.maps.Marker({  
                            position: new google.maps.LatLng(latitude, longitude),  
                            map: map  
                    }));  
            }  
    }  
}  

You might also want to suppress the built-in marker drawing of DirectionsRenderer. Replace

var rendererOptions = {  
    draggable: true  
};  

with the following

var rendererOptions = {  
    draggable: true,  
    suppressMarkers: true  
};  

I couldn't find any official references to that sf member. Use it at your own risk, Google may modify the API without further notice. Until they make a public API for manipulating waypoints after the directions have been dragged, I can't think of a better solution.

This is my first Stack Overflow answer, I hope that I was helpful.

Kind regards, Johnny

这篇关于从DirectionsRenderer获取来自折线或标记的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！