javascript - Google place Api通过排序找到附近的地方以及当前地点和附近地点之间的距离

Question

我正在尝试查找附近的地点并计算从当前地点到附近地点的距离，然后我想显示表格中的所有地点，并按照与当前地点的距离递增顺序排列。现在我已经成功了

1. 查找附近的地点
2. 查找从当前地点到每个附近地点的距离
3. 按照从 google 收到的响应顺序显示每个这样的地点和距离我已将数据添加为 json 数组并将其添加到控制台

我想对这个数组进行排序，显示排序后的数组而不是第 3 步中的直接结果。有人可以帮我吗？？？

DEMO

JQuery

用于计算距离并附加到带有 id Display 的表格的代码

function createMarker(obj) {

    // prepare new Marker object
    var mark = new google.maps.Marker({
        position: obj.geometry.location,
        map: map,
        title: obj.name
    });
      alert(obj.name);
   var lat=document.getElementById('lat').value;
   var long=document.getElementById('lng').value;
  // alert(lat);
  //alert(long);


  var p1 = new google.maps.LatLng(lat,long);
var p2 = new google.maps.LatLng(obj.geometry.location.lat(),obj.geometry.location.lng());

  google.maps.LatLng.prototype.distanceFrom = function(latlng) {
  var lat = [this.lat(), latlng.lat()]
  var lng = [this.lng(), latlng.lng()]
  var R = 6378137;
  var dLat = (lat[1]-lat[0]) * Math.PI / 180;
  var dLng = (lng[1]-lng[0]) * Math.PI / 180;
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
  Math.cos(lat[0] * Math.PI / 180 ) * Math.cos(lat[1] * Math.PI / 180 ) *
  Math.sin(dLng/2) * Math.sin(dLng/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;
  return Math.round(d);
}
 // var loc1 = new GLatLng(lat, long);
//var loc2 = new GLatLng(obj.geometry.location.lat(), obj.geometry.location.lng());
var dist = p2.distanceFrom(p1);
//alert(dist/1000+'m');
  var distn=dist/1000;
  var dost=distn+(distn <1 ? "m" : "km")
  $('#Display').append('<tr><td>'+obj.name+'</td><td>'+dost+'</td></tr>');
  datas.push({ app:obj.name,message:distn});
 //alert(google.maps.geometry.spherical.computeDistanceBetween(p1, p2)+'sa');




    markers.push(mark);

    // prepare info window
    var infowindow = new google.maps.InfoWindow({
        content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name + 
        '<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
    });

    // add event handler to current marker
    google.maps.event.addListener(mark, 'click', function() {
        clearInfos();
        infowindow.open(map,mark);
    });



    infos.push(infowindow);

  console.log(datas);


   // parse(datas);
}

JSON 数据输出(示例)位置可能会有所不同，但距离是字段

 [{
       "place": "Taïm",
       "Distance": 1.193
   }, {
       "place": "Balthazar",
       "Distance": 1.127
   }, {
       "place": "Tribeca Grill",
       "Distance": 0.678
   }, {
       "place": "Lombardi's Pizza",
       "Distance": 1.179
   }, {
       "place": "Whole Foods Market",
       "Distance": 0.484
   }, {
       "place": "Best Western Bowery Hanbee Hotel",
       "Distance": 1.015
   }, {
       "place": "Les Halles",
       "Distance": 0.536
   }, {
       "place": "Cafe Gitane",
       "Distance": 1.367
   }, {
       "place": "Shake Shack",
       "Distance": 0.782
   }, {
       "place": "Bubby's",
       "Distance": 0.64
   }, {
       "place": "Ninja New York",
       "Distance": 0.397
   }, {
       "place": "La Esquina",
       "Distance": 1.056
   }, {
       "place": "Peasant",
       "Distance": 1.277
   }, {
       "place": "Apotheke",
       "Distance": 0.658
   }, {
       "place": "Joe's Shanghai",
       "Distance": 0.697
   }, {
       "place": "Kaffe 1668",
       "Distance": 0.436
   }, {
       "place": "Rice To Riches",
       "Distance": 1.199
   }, {
       "place": "SUBWAY® Restaurants",
       "Distance": 0.382
   }, {
       "place": "Bouley",
       "Distance": 0.384
   }, {
       "place": "North End Grill",
       "Distance": 0.808
   }]

Answer 1

Places 库有一个类允许您按特定顺序获取结果。请参阅documentation on the RankBy class .

var request = {
    location: coords,
    rankBy: google.maps.places.RankBy.DISTANCE
};

var service = new google.maps.places.PlacesService(map);
service.search(request, callback);

要计算两点之间的距离，您可以使用具有 computeDistanceBetween 方法的几何库。 See here .

var distance = google.maps.geometry.spherical.computeDistanceBetween(a, b);

如果使用上述 2 个库，请不要忘记将它们包含在 API 脚本调用中。

https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,geometry

希望这对您有所帮助!