Question

我正在使用Leaflet映射API。我想确定点击折线中的哪个点。折线是我使用MapQuest Open的Directions服务呈现的。

相关代码是：

for ( var i = 0; i < latlngs.length; i++ )
   {

   // the equals method uses a small fudge factor to decide if the two 
   // points are the same.

   if ( latlng.equals( latlngs[ i ] ))
      {
      return i;
      }
   }

.equals（）应该用软糖因子比较点。当我点击折线时，我得到一个带有lat / lngs的事件，如：

'38.83966582989183','-77.0083075761795'

我在折线中的纬度/经度精度较低，如下所示：

'38.841289','-77.008842'

因此，当我循环查找匹配项equals()时，永远不会返回true。很明显，click事件正在触发，因此传单知道我已经点击折线，但似乎没有一种干净的方法来获得被点击的latlng的实际偏移量。

我正在考虑降低鼠标点击返回的精度，但这并不像正确的解决方案那样“感觉”。

非常感谢任何帮助/指示。

编辑：

将L.LatLng.MAX_MARGIN设置为1.0E-3似乎有效，但这似乎是一个非常大的余量。

Answer 1

我的传单代码：

var _getClosestPointIndex = function(lPoint, arrayLPoints) {
    var distanceArray = [];
    for ( var i = 0; i < arrayLPoints.length; i++ ) {
        distanceArray.push( lPoint.distanceTo(arrayLPoints[i]) );
    }
    return distanceArray.indexOf(  Math.min.apply(null, distanceArray) );
};    

var polyLine = L.polyline(arrayLatLngCollection, lineOpt);
        polyLine.addEventListener('click dblclick', function(e) {
            var index = _getClosestPointIndex(e.latlng, arrayLatLngCollection);
            var popup = L.popup()
                .setLatLng(new L.latLng(arrayLatLngCollection[index]))
                .setContent('<p>Hello world!<br />This is a nice popup.</p>')
                .openOn(self.map);
});

Answer 2

我提出的解决方案可能不合适，但似乎有效。我注意到折线中有一个_originalPoints数组。折线事件中还有一个PointPoint成员，它是一个Point对象。

我不喜欢使用未记录的API但是循环遍历找到最接近点击点的点，使用L.LineUtil.pointToSegmentDistance似乎工作如下：

    var point = e.layerPoint;

var points = polyline._originalPoints;

for ( var i = 0; i < points.length; i++ )
    {

    if ( i < points.length - 2 )
        {

        if ( min_distance > L.LineUtil.pointToSegmentDistance( point, points[i], points[ i + 1] ) )
            {
            min_distance = L.LineUtil.pointToSegmentDistance( point, points[i], points[ i + 1] );
            min_offset = i;
            }

        }

    }

使用传单映射api，如何确定点击折线中的哪个点？

2 个答案: