根据用户单击和/或当前用户位置绘制多段线

Question

目前，我正在构建一个webapp来绘制我所在城市的公共交通路线(这不在Google地图中)。我正在使用编码的多段线来显示它们，并且已经创建了一个<ul>，可以从其中手动选择它们。它工作得很好，但需要添加更多功能。

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

我已经阅读了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
  });
}

您将希望尝试使用公差参数，以便为单击目标找到合适的大小。

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