【发布时间】:2012-01-18 17:58:04
【问题描述】:
应用程序是这样工作的: 用户输入起始位置和距离。用户可以选择在道路上绘制圆圈或线条。圆圈工作正常。过去可以工作的线路。
当 Lines 时,代码查找起始位置的纬度/经度,然后在用户设置的距离(例如 100 公里)处查找原点的 N、S、E、W。从 N 个目的地开始,代码调用 google.maps.DirectionsService() 来获取从原点到 N 的路线。这会在 route.overview_path 中返回一个纬度/经度数组。
注意:我可以使用directionsRenderer() 来绘制路线,但是,绘制的距离会大于用户设置的距离。绘制从原点到 N 点的整个路线可能超过道路 124 公里,而我只想绘制 100 公里。
相反,我逐步遍历 route.overview_path[] 数组,检查该点与原点之间的距离,并将每个点添加到一个新数组中。当距离大于用户设置的距离时,我停下来,弹出最后一个元素,然后基于这个第二个较小的数组创建一个新的折线。
我整天都在 Chrome 的开发者模式下浏览 javascript、设置断点、观察本地人等。在 google.maps.Polyline({}) 中传递的点数组是一组很好的独特点。我只是无法弄清楚他们为什么不渲染。
最终,代码用于从原点开始绘制 4 条线,一条向北,一条向东,向南,向西。等等……
代码在这里:http://whosquick.com/RunViz.html
感谢您的关注。
【问题讨论】:
标签: google-maps-api-3 data-visualization