限制谷歌地图V3标记的拖动到折线(Confine dragging of Google Maps V

2019-06-24 16:20发布

我创建了一个谷歌地图,并绘制在它的折线。 然后我添加了一个标记到polyine(相同COORDS为折线的开始COORDS)的开始。

我希望能够做的,就是抓住并拖动标记,但有它“粘”在折线这样,你只能将它拖到沿折线,而不是离开或到它的侧面。

是否有可能限制可拖动标记,以通用汽车V3的路径? 如果没有,谁能想到这会如何做? 还有,当用户删除它卡标​​记的最近点的路径上的可能性,但我宁愿效果更平滑“沿路径拖动”。

高兴有ArcGIS的建议了。 因为这是理论问题更多的是没有提供代码。

让我知道如果我需要进一步解释。

提前致谢

Answer 1:

好了,所以我设法解决这个问题。 这不完全优雅,而且我敢肯定,这可以改善上,但这里的一般概念,我想出了:

我创建经纬度点从GPX文件中的数组,但他们只记录点每20秒左右。 这还不够,粒度我的目的,所以我所做的是我填充点的阵列,每对由GPX记录点之间约10个点(在直线):

$.each(array_of_points_to_pad, function(key, pt) {
    var current_point = pt;//The current point
    var next_point = array_of_points_to_pad[key + 1];//The point immediately after the current point

    //Check that we're not on the last point 
    if (typeof next_point !== 'undefined') {
        //Get a 10th of the difference in latitude between current and next points
        var lat_incr = (next_point.lat() - current_point.lat()) / 10;

        //Get a 10th of the difference in longitude between current and next points
        var lng_incr = (next_point.lng() - current_point.lng()) / 10;

        //Add the current point to a new padded_points array
        padded_points.push(current_point);

        //Now add 10 additional points at lat_incr & lng_incr intervals between current and next points (in the new padded_points array)
        for (var i = 1; i <= 10; i++) {
            var new_pt = new google.maps.LatLng(current_point.lat() + (i * lat_incr), current_point.lng() + (i * lng_incr));
            padded_points.push(new_pt);
        }
    }
});

现在,我有个更精致的阵列,我用它来绘制折线。 填充的折线看起来没有什么不同,而不填充绘制的折线,因为所有的附加点的位于一个线性“作为最乌鸦蝇”现有点之间线路。

var line = new google.maps.Polyline({
    path: polyline_path_points_padded,
    strokeColor: '#ff0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});
line.setMap(map);

现在,我在该行的开头添加一个拖动的标记:

var latLng = new google.maps.LatLng(startlat,startlng);
var marker = new google.maps.Marker({
  position: latLng,
  map: map,
  draggable:true
});

所有剩下要做的就是控制这个标志的阻力和dragend事件:

google.maps.event.addDomListener(marker,'dragend',function(e){
    marker.setPosition(find_closest_point_on_path(e.latLng,padded_points));
});

google.maps.event.addDomListener(marker,'drag',function(e){
    marker.setPosition(find_closest_point_on_path(e.latLng,padded_points));
});

在这里,我们简单地将标记的位置的经纬度的功能find_closest_point_on_path()在拖动过程中,当标志被丢弃。 送点的填充阵列作为搜索的路径。

功能如下:

function find_closest_point_on_path(marker_pt,path_pts){
    distances = new Array();
    distance_keys = new Array();
    $.each(path_pts,function(key, path_pt){
        var R = 6371; // km
        var dLat = (path_pt.lat()-marker_pt.lat()).toRad();
        var dLon = (path_pt.lng()-marker_pt.lng()).toRad();
        var lat1 = marker_pt.lat().toRad();
        var lat2 = path_pt.lat().toRad();

        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2); 
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
        var d = R * c;
        //Store the key of the point on the path that matches this distance
        distance_keys[d] = key; 

    });
            //Return the latLng pt on the path for the second closest point 
    return path_pts[distance_keys[_.min(distances)]+1];
}

这个功能是什么(有学位的帮助弧度功能)是它发现线路上的标记位置和所有点之间的距离。 随后,它发现的最近点的标记,并返回坐标是一前一后第二天最近点。 这样,当你拖动或删除标记为“捕捉”到下一个点(而不是陷在一个地方)。

工作JS小提琴下面:

http://jsfiddle.net/Z5GwW/4/

没有跨浏览器测试。 在Chrome最新版本。



Answer 2:

感谢您对这个解决方案。

得到它的工作没有依赖关系,我不得不修改几行:

首先,检查toRad()函数存在:

 if (typeof(Number.prototype.toRad) === "undefined") { Number.prototype.toRad = function() { return this * Math.PI / 180; } } 

而且,去除_。 依赖通过更换返回代码:

return path_pts[distance_keys[ Math.min(...distances) ]+1];

最后,包括distancekeys之前的距离[] []

 distances[key] = d; distance_keys[d] = key; 



文章来源: Confine dragging of Google Maps V3 Marker to Polyline