我正在搜索位于路线边界内的地点。我想按与路线的距离顺序返回结果。
我尝试rankby=distance
了附近的搜索请求,但它不起作用,因为它需要位置和半径,而我有一个 LatLngBounds 对象和一条路线。这甚至可能吗?
这是我的脚本沿边界内的路线返回地点。
它返回结果,但以随机顺序...
注意:目标是使用边界而不是位置。
我正在搜索位于路线边界内的地点。我想按与路线的距离顺序返回结果。
我尝试rankby=distance
了附近的搜索请求,但它不起作用,因为它需要位置和半径,而我有一个 LatLngBounds 对象和一条路线。这甚至可能吗?
这是我的脚本沿边界内的路线返回地点。
它返回结果,但以随机顺序...
注意:目标是使用边界而不是位置。
在我们考虑按与路线的距离对结果进行排序之前,我们必须有一些基本的函数来计算距离。在这里我们立即遇到了障碍,因为地球当然是一个球体,球体上的距离比平面上的距离更复杂。
但是,对于相对较小的距离(例如,Tamiami 到 Miami),我们可以将距离视为在飞机上,并获得合理的结果。如果我们可以接受这种近似,我们只需要一种方法来确定点和线段之间的最小距离。我没有重新发明轮子,而是从这个 SO 答案中改编了一些代码:
function sqr(x) { return x * x }
function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y) }
function distToSegment2(p, v, w) {
return dist2(getClosestPoint(p,v,w));
}
function getClosestPoint( p, v, w ) {
var l2 = dist2(v, w);
if (l2 === 0) return v; // line is actually a point; just return one ofthe two points
var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
// point is closest to v, return v
if (t < 0) return v;
// point is closest to w, return w
if (t > 1) return w;
// point is closets to some midpoint, return that
return { x: v.x + t * (w.x - v.x), y: v.y + t * (w.y - v.y) };
}
function distToSegment(p, v, w) { return Math.sqrt(distToSegmentSquared(p, v, w)); }
现在,由于我们(当前)使用的所有距离都是排序,我们不必采取额外的求平方根的步骤,所以我们可以简单地使用dist2
(距离平方)函数来节省我们一点额外的计算.
Google 路线查询的结果包含一个名为的数组overview_path
,其中包含用于在地图上实际绘制路径的所有线段。我们将使用这些线段来确定最近点:
function closestPointOnPath_Cartesian( place, path, cb ) {
var min = Number.MAX_VALUE;
var closestPoint = null;
for( var i=0; i<path.length-1; i++ ) {
var v = { x: path[i].lng(), y: path[i].lat() };
var w = { x: path[i+1].lng(), y: path[i+1].lat() };
var p1 = { x: place.geometry.location.lng(),
y: place.geometry.location.lat() };
var p2 = getClosestPoint( p1, v, w );
var d2 = dist2( p1, p2 );
if( d2 < min ) {
min = d2;
closestPoint = new google.maps.LatLng( p2.y, p2.x );
}
}
cb( closestPoint, min );
}
请注意,我小心地命名此函数以表明它计算笛卡尔距离,这可能会导致长路线或靠近极点的路线出现问题。
现在我们有了这个函数,我们要做的就是用距离注释每个结果,以便我们可以对其进行排序,然后实际执行排序:
for( var i=0; i<results.length; i++ ) {
closestPointOnPath_Cartesian( results[i],
result.routes[0].overview_path,
function( closestPoint, coordDist2 ){
results[i].closestPointOnPath = closestPoint;
results[i].coordDist2 = coordDist2;
results[i].geoDistKm = geoDistanceKm( results[i].geometry.location, closestPoint );
});
}
// sort results by relative distance (coordDist2)
results.sort( function(a,b) { return a.coordDist2 - b.coordDist2; } );
出于调试可视化的目的,我添加了一些代码来绘制从路径上最近点到每个位置的线:
var distLine = new google.maps.Polyline({
path: [place.closestPointOnPath, place.geometry.location],
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
distLine.setMap( map );
最后,为了获得额外的荣誉,我使用了haversine公式(改编自this SO answer)
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
// geographic distance courtesy the haversine formula
function geoDistanceKm(p1,p2) {
var R = 6371; // km
var x1 = p2.lat()-p1.lat();
var dLat = x1.toRad();
var x2 = p2.lng()-p1.lng();
var dLon = x2.toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(p1.lat().toRad()) * Math.cos(p2.lat().toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c;
}
所以现在我们实际上可以在结果列表中显示真实的地理距离。
注意:因为我们正在计算飞机上的距离,对于长途路线或极点附近的路线,完全有可能该顺序将与基于半正弦公式确定的地理距离的(正确)顺序不匹配。要解决这个问题,需要派生一种算法来确定球体上的点/段距离,这是另一天的任务。
您可以在这里看到完整的解决方案:http: //jsfiddle.net/UqLTE/4/
如果您使用Place Search Request方法,您可以使用 bounds 参数而不是 location 和 radius。
否则,您可以使用 Google Maps API 方法,使用框的中心作为圆心,将框的对角线的一半作为圆的半径。这将为您提供包围框的圆圈内的所有位置。然后,您可以扫描整个集合,删除圆圈内但框外的任何地方。
在方法调用中添加 rankby=distance 将按与指定位置(例如框的中心)的距离顺序对结果进行排序。如果您需要按与路线的距离顺序排序,则需要计算距路线。最简单的方法是使用矢量投影计算路线中每个线段的垂线。如果投影点不在线段的一端,则距离是到线段的端点。沿矢量的距离符号将告诉您要测试哪一端。到最近线段的距离是到路线的最短距离。
Google Maps API V3 中最接近的方法是:DistanceMatrixService,它查找多个源位置和目标位置之间的距离。还有一些其他方法可能有助于部分计算,但我看不到任何找到路线/折线和地点/点之间距离的东西。
这是一个想法。您必须从路线起点获取每个地点的每个距离并将该值添加为列表的属性,然后根据该属性的值对列表进行排序。
这是一个如何根据其属性值对列表进行排序的示例。
HTML
<ul id="place-list">
<li data-id="4">Tokyo 4</li>
<li data-id="0">Paris 0</li>
<li data-id="5">Frankfurt 5</li>
<li data-id="2">London 2</li>
<li data-id="1">greece 1</li>
<li data-id="3">Munich 3</li>
</ul>
<button id="asc">ASC</button>
<button id="desc">DESC</button>
jQuery
var sortArray = function (items, inverse) {
var inverse = inverse || false;
var sortedArray = items.map(function () {
return {
id: $(this).data("id"),
element: $(this)[0].outerHTML
};
});
var appendTo = items.parent();
items.remove();
sortedArray.sort(function (a, b) {
return a.id > b.id ? (inverse ? -1 : 1) : (inverse ? 1 : -1);
});
sortedArray.each(function () {
$(appendTo).append(this.element);
});
}
$("#asc").click(function () {
sortArray($("#place-list").find("li"));
});
$("#desc").click(function () {
sortArray($("#place-list").find("li"), true);
});
示例:http: //jsfiddle.net/995dY/