Teach you step by step how to view nearby people

Teach you step by step how to view nearby people

The tutorial shared today is to teach you how to implement nearby people or other content. The server uses PHP. Before using it, please confirm whether your user data table stores the user's latest coordinates and update time. *** Create a separate table to store the user's latest coordinates and update time.

Before getting nearby people, you must first get your own coordinates. You can use baiduLocation to get the coordinates of the current user, and then use the current coordinates to request the server to return user data sorted by distance.

  1. apiready = function() {
  2. var baiduLocation = api.require( 'baiduLocation' );
  3. baiduLocation.startLocation({
  4. accuracy: '100m' ,
  5. filter: 1 ,
  6. autoStop: true  
  7. }, function(ret, err){
  8. var sta = ret.status;
  9. var lat = ret.latitude;
  10. var lon = ret.longitude;
  11. if (sta){
  12. //Successfully obtained  
  13. } else {
  14. //Get failed  
  15. }
  16. });
  17. };

//After successfully obtaining the location, the developer sends a request to the server

  1. api.ajax({
  2. url: request address,
  3. method: 'post' ,
  4. timeout: 30 ,
  5. dataType: 'json' ,
  6. returnAll: false ,
  7. data:{
  8. values: {lat: lat,lon:lon}
  9. }
  10. },function(ret,err){
  11. if (ret) {
  12. var urlJson = JSON.stringify(ret);
  13. api.alert({msg: urlJson});
  14. } else {
  15. api.alert({
  16. msg 'Error code:' +err.code+ '; Error message:' +err.msg+ 'Network status code:' +err.statusCode)
  17. });
  18. };
  19. });

In fact, the code on the APP side is very simple. It mainly obtains the coordinates and sends them to the server. The server then calculates the distance based on the transmitted coordinates and returns the data in order of distance. So the key point is how the server side implements

Let's take PHP as an example on the server side. First, get the data of the user with coordinates. This is foreach. Then calculate the distance based on the passed coordinates. The following is a piece of code in foreach

  1. Assume user data is $data;
  2. //Assemble the coordinates posted before foreach  
  3. $lat = $_POST[ 'lat' ];
  4. $lon = $_POST[ 'lon' ];
  5. $myLocation = $lon. ',' .$lat;
  6.  
  7. foreach($data as $key=>$v){
  8. //E: The coordinates of the other user are: 104.077638,30.673573  
  9. $v[ 'position' ] = "104.077638,30.673573" ;
  10. $newData[$key][ 'distance] = distanceBetween($myLocation,$v[' position']);
  11.  
  12. .......
  13. //Other user data  
  14. }

Then foreach the new array and sort it by distance

  1. foreach ($newData as $key => $r) {
  2. $distance[] = $r[ 'distance' ];
  3. }
  4.  
  5. array_multisort($distance, SORT_ASC, $newData);
  6. Output JSON array
  7. echo json_encode($newData);

Note: There is a custom function distanceBetween() in the foreach above;

This is used to calculate the distance between two coordinates. The code is as follows:

  1. /**
  2. * Calculate the distance between two coordinates (meters)
  3. * @param float $fP1Lat starting point (latitude)
  4. * @param float $fP1Lon starting point (longitude)
  5. * @param float $fP2Lat end point (latitude)
  6. * @param float $fP2Lon end point (longitude)
  7. * @return int
  8. */  
  9. function distanceBetween($mylonlat, $findlonlat){
  10. $mylonlat = explode( ',' , $mylonlat);
  11. $findlonlat = explode( ',' , $findlonlat);
  12. list($lng1,$lat1) = $mylonlat;
  13. list($lng2,$lat2) = $findlonlat;
  14. $EARTH_RADIUS= 6378.137 ;
  15. $PI= 3.1415926 ;
  16. $radLat1 = $lat1 * $PI / 180.0 ;
  17. $radLat2 = $lat2 * $PI / 180.0 ;
  18. $a = $radLat1 - $radLat2;
  19. $b = ($lng1 * $PI / 180.0 ) - ($lng2 * $PI / 180.0 );
  20. $s = 2 * asin(sqrt(pow(sin($a/ 2 ), 2 ) + cos($radLat1) * cos($radLat2) * pow(sin($b/ 2 ), 2 )));
  21. $s = $s * $EARTH_RADIUS;
  22. $s = round($s * 1000 );
  23. if ($len_type > 1 ) {
  24. $s /= 1000 ;
  25. }
  26. $distance = round($s/ 1000 , 2 );
  27. return $distance;
  28. }

<<:  A good article to solve your doubts: HD multi-screen adaptation solution for mobile H5 pages

>>:  10 Best JavaScript Development Practices You Need to Know

Recommend

App promotion plan: free channels and paid channels!

In the initial stage of a startup team, how shoul...

How to deal with difficult-to-machine materials? Cooling technology can help!

Your browser does not support the video tag Autho...

The basics of through train promotion, a must-read for newbies!

Today I’m going to share with you some basic thro...

B150 motherboard is coming, will it be the next most popular motherboard?

In August this year, Intel launched the sixth-gen...

Why can’t I help but stick my hands into rice when I go to the supermarket?

Have you ever had this experience: when you see b...

Data analysis for event promotion, learn it now

PSM is not suitable for all marketing scenarios. ...

Laser technology changes advertising: large naked-eye 3D screen

Recently, Austrian researchers announced that the...

Named by experts to fight against Omicron, what is “vaccine adjuvant”?

With the arrival of Omicron and the increase in b...