javascript - 如何根据最接近输入地址的纬度/经度显示内容

Question

我正在为客户开发一个求职板类型的网站，该网站具有针对发布的职位的过滤器。该网站基于 Wordpress 构建，并使用 Ajax Load More 插件动态填充作业。我想要一个过滤器，用户可以输入他们的地址，并且将填充最接近该输入地址的工作。

我目前使用 Google Maps API 将其设置为获取发布的每个职位的纬度和经度，以及用户输入地址时的地址的纬度和经度。我不知道他如何将两者关联起来并让 Ajax Load More 填充与输入地址最接近的纬度/经度的作业？

Answer 1

首先，创建一个数组，其中包含发布的职位的纬度/经度。这是一个例子:

var job_locs = [ //job locations array
   {lat:59.611975, lng:16.547017},//within radius
   {lat:59.612186, lng:16.544901},//within radius
   {lat:59.614412, lng:16.538992},//within radius
   {lat:59.615677, lng:16.546703},//within radius
   {lat:59.618794, lng:16.545480},//within radius
   {lat:59.622650, lng:16.558984},//outside radius
   {lat:59.615612, lng:16.555962},//outside radius
   {lat:59.610812, lng:16.549959},//outside radius
   {lat:59.608804, lng:16.541045},//outside radius
   {lat:59.608084, lng:16.537515},//outside radius
];

如您所见，我在用户 500 米半径内提供了 5 个，在半径外提供了另外 5 个。这是用户的位置:

var user = { lat: 59.615911, lng: 16.544232 };

现在您只需遍历作业位置数组并检查它们是否在半径内。为此，SO 中有一篇关于此的帖子:Check if a latitude and longitude is within a circle google maps如果您检查已接受的答案(归功于 Guffa )，他使用此函数检查该点是否在半径内:

function arePointsNear(checkPoint, centerPoint, km) { // credits to user:69083
   var ky = 40000 / 360;
   var kx = Math.cos(Math.PI * centerPoint.lat / 180.0) * ky;
   var dx = Math.abs(centerPoint.lng - checkPoint.lng) * kx;
   var dy = Math.abs(centerPoint.lat - checkPoint.lat) * ky;
   return Math.sqrt(dx * dx + dy * dy) <= km;
}

现在我们在循环中使用这个函数:

job_locs.forEach(function(locs){
      var n = arePointsNear(user, locs, 0.5); //0.5km = 500meters
      if(n){
         marker = new google.maps.Marker({
            map: map,
            position: locs,
            label: {
               text:"I", //marking all jobs inside radius with I
               color:"white"
            }
         });
      }else{ //remove this to see only the locations within radius
         marker = new google.maps.Marker({
            map: map,
            position: locs,
            label: {
               text:"O", //marking all jobs outside radius with O
               color:"white"
            }
         });
      }
   });

Note: This displays all the nearby locations from the list within the provided radius. If there are no location found within the radius, there will be no result. Also, please read the source of arePointsNear function, for the limitation of this function.

这是 JS Bin 中的一个工作示例:click me!