谷歌地图方向 V3：地图上的多个方向

Posted 2023-05-06

【中文标题】谷歌地图方向 V3：地图上的多个方向

【英文标题】：Google Maps directions V3: Multiple directions on a map

【发布时间】：2011-04-02 01:09:15

【问题描述】：

我正在尝试在地图的单个实例上渲染多个方向（本质上是它们的折线）。在以前版本的地图 API 中，我做了类似的事情

//directions[] stores the GDirections objects
//x[] is an array of Elements extracted from an XMLHTTPResponse object
//iterating over the values in x[]
GEvent.addListener(directions[i], "load", function() 
 var polyline = this.getPolyline();
 map.addOverlay(polyline);
 polyline.setStrokeStyle(opacity:0.2)
 );

directions[i].load("from:here to:"+x[i].childNodes[0].nodeValue,getPolyline:true);

现在有 DirectionsService 和 DirectionsRenderer 类，我不知道做同样事情的最佳实践是什么。我是否创建了 DirectionsRenderer 类的多个实例并让它们对主地图的实例执行 setMap()？我是否创建了 DirectionsServices 类的多个实例。

总的来说，我对 javascript 和函数式语言非常陌生，几乎没有尝试理解函数式闭包，因为它们与回调有关。也为格式道歉。

我们将不胜感激，我会尽力澄清您提出的任何问题。

【参考方案1】：

嘿 Ephraim，在研究了几个小时并尝试了不同的解决方案后，我想出了这个，您需要创建 DirectionsRenderer 的不同实例，并且（这很重要！）在响应函数中创建 DirectionsService 实例。 This link 将引导您走向正确的方向。

【参考方案2】：

使用@ifaour 发布的链接，我制作了一个肮脏的演示。因为我的目的要求每个方向对象有多个唯一的航路点，所以我把 sn-p 做得更远一点，为航路点创建数组：这里是 link to the demo...一切都内联。 :D

这是一组非常肮脏的代码（我是中级）......无论如何，如果可以的话，请清理它

【讨论】：

显然，这在 Firefox 上有点参差不齐……不过，请在 Chrome 和 Safari 上查看。不知道 IE 因为我在 Mac 上