如何显示基于最近纬度/长度输入地址的内容 [英] How To Display Content Based on Closest Lat/Long to Entered Address

问题描述

我正在为一个客户开发一个工作委员会类型的网站，该网站上有发布工作的过滤器。这个网站建立在Wordpress之外，并使用Ajax Load More插件来动态填充作业。我想要一个过滤器，用户可以输入他们的地址，并且输入的地址最近的作业将会填充。

我现在已经设置了抓取发布的每项工作的经度和纬度，以及用户输入时的地址的经纬度，使用Google Maps API。我无法弄清楚他如何关联这两者，并让Ajax Load More填充输入地址最接近的纬度/经度的作业？ 解决方案

首先，创建一个数组，其中包含所发布作业的纬度/经度。这里有一个例子：

  var job_locs = [//工作地点数组
 {lat：59.611975，lng：16.547017} ，//在半径内
 {lat：59.612186，lng：16.544901}，//在半径
 {lat：59.614412，lng：16.538992}内，//在半径内
 {lat：59.615677， //半径
 {lat：59.618794，lng：16.545480}，//在半径
 {lat：59.622650，lng：16.558984}内，//半径以外
 { lat：59.615612，lng：16.555962}，//外半径
 {lat：59.610812，lng：16.549959}，//外半径
 {lat：59.608804，lng：16.541045} //外部半径
 {lat：59.608084，lng：16.537515}，//半径外
]; 
  

正如您在那里看到的那样，我在用户的500米范围内提供了5个，另有5个在半径之外。这里是用户的位置：

  var user = {lat：59.615911，lng：16.544232}; 
  

现在您只需遍历作业位置数组并检查它们是否位于半径范围内。要做到这一点，在这里有一篇关于这个的文章：如果您检查接受的答案（信用 69083 / guffa> Guffa ），他用这个函数检查点是否在半径范围内：

 函数arePointsNear（checkPoint，centerPoint，km）{//授予用户：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; 
 
 $ / code> 

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



  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，//使用I 
颜色标记圆角内的所有作业：white
} 
}）; 
} else {//删除它只查看位置在半径范围内
 marker = new google.maps.Marker（{
 map：map，
 position：locs，
 label：{
 text：O，/ /使用O 
 color：white
} 
}）; 
} 
}）; 
  








注意：这将显示$中的所有附近位置b $ b提供半径。如果在半径内没有找到位置，则
将不会有结果。此外，请阅读
arePointsNear函数源，
来限制此函数。

以下是JS Bin中的一个工作示例：点击我！

I'm developing a job board type website for a client that has filters for the jobs posted. This website is built off of Wordpress and using the Ajax Load More plugin to dynamically populate the jobs. I want to have a filter that a user can enter their address and the closest jobs to that entered address would populate.

I currently have it set up to grab the latitude and longitude of each job posted, as well as, the latitude and longitude of the address when the user enters it, using the Google Maps API. What I can't figure out his how to correlate the two and have Ajax Load More populate the jobs with the closest lat/long to the entered address?

解决方案

First, create an array that contains the lat/lng's of the job posted. Here's an example:

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
];

As you can see there, I have provided 5 within the 500 meter radius of the user and another 5 outside the radius. Here's the user's location:

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

Now you just have to loop through the array of job locations and check if they are within the radius. To do this, there is a post about this here in SO: Check if a latitude and longitude is within a circle google maps if you check the accepted answer (credits to Guffa), he used this function to check if the point is within the radius:

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

Now we use this function in a loop:

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.

Here is a working sample in JS Bin: click me!

这篇关于如何显示基于最近纬度/长度输入地址的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！