javascript - 根据用户点击和/或当前用户位置绘制折线

Question

目前我正在构建一个网络应用程序来绘制我的城市公共(public)交通路线(Google map 中没有)。我使用编码的折线来显示它们并创建了一个 <ul>可以从中手动选择它们。它工作正常，但需要添加更多功能。

我想要的是，当用户单击 map 上的某个点或使用地理定位功能时，会绘制通过附近的路线(作为预定义的折线)。

我已阅读containsLocation()文档，但它似乎没有解决问题。我是否缺少一个特定的库来执行此操作？

已经搜索了很多，但找不到我想要的。

目前，这是绘制折线的代码(当从 <li onclick='drawfunction()';> 元素调用时):

    function (drawingfunction) {

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    var decodedPath = google.maps.geometry.encoding.decodePath('encodedpolyline'); 

    var decodedLevels = decodeLevels('encodedlevels');
    }

Answer 1

我想您想查看 google.maps.geometry.poly.isLocationOnEdge功能。

假设你的路线Polyline位于 routes 数组中:

for (var i = 0; i < routes.length; i++) {
  var matching = google.maps.geometry.poly.isLocationOnEdge(
      location, routes[i], TOLERANCE);

  routes[i].setOptions({
    strokeColor: matching ? MATCHING_COLOR : DEFAULT_COLOR,
    strokeOpacity: matching ? 1 : .7
  });
}

您需要调整容差参数来找到适合您的点击目标的尺寸。

如果你有很多路线(或复杂的路线)，它可能会很慢。如果是，那么您将需要研究像 quad tree 这样的数据结构。在调用 isLocationOnEdge 之前缩小路线范围。