Question

我正在为一个客户开发一个工作板类型的网站，该网站包含已发布作业的过滤器。该网站基于Wordpress构建，并使用Ajax Load More插件动态填充作业。我希望有一个过滤器，用户可以输入他们的地址，并填充与输入的地址最接近的作业。

我目前已将其设置为使用Google Maps API获取所发布的每个作业的纬度和经度，以及用户输入地址时的纬度和经度。什么我无法弄清楚他如何关联这两个并使Ajax加载更多填充与输入的地址最接近的纬度/长度的作业？

Answer 1

首先，创建一个包含所发布作业的lat / lng的数组。这是一个例子：

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），他使用这个函数检查点是否在半径范围内： / p>

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"
            }
         });
      }
   });

注意：这会显示位于列表中的所有附近位置提供半径。如果在半径范围内找不到位置，没有结果。另外，请阅读source of arePointsNear function，限制这个功能。

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

Answer 2

你有什么

每项工作的纬度/经度
用户地址的纬度/经度

你想要什么

按最近位置显示的职位列表

方法

使用this page
按计算的距离顺序加载作业列表

如何根据最近的Lat / Long到输入地址显示内容

2 个答案:

你有什么

你想要什么

方法