javascript - Display all locations from database within a given radius - Stack Overflow

admin管理员组

文章数量:1388110

Using google maps I would like to retrieve and display all locations withing a fixed radius of a given point.

I've managed to find Display Location guide and also saw numerous posts regarding retrieving it using SQL query. My database containing, name of the item, address (to find alt,lon), alt, lon and description. How do I use the stored alt, lon to retrieve only the ones in, let's say 50km radius.

Here is my code:

javascript

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(31.046051, 34.85161199999993);
    var myOptions = {
        zoom: 7,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function updateCoordinates(latlng)
{
  if(latlng) 
  {
    document.getElementById('lat').value = latlng.lat();
    document.getElementById('lng').value = latlng.lng();
  }
}

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            updateCoordinates(results[0].geometry.location);
            if (marker) marker.setMap(null);
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                draggable: true
            });

            google.maps.event.addListener(marker, "dragend", function() {
                updateCoordinates(marker.getPosition());
            });

        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

  

  
  function showPositionCoupons(sentlat, sentlon)
  {
  lat=sentlat;
  lon=sentlon;
  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('map_canvas')

  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  }

I think I need to use showPositionCoupons() in a loop maybe, while reading alt and lon? Thanks for any help given, I know it's frequent question yet I couldn't manage to solve it using what exists.

I've tried to use Display Location guide DisplayLocations() method, yet it didn't work for me, though the way the locations presented there is perfect, only need to exclude the ones out of radius bounds.

Using google maps I would like to retrieve and display all locations withing a fixed radius of a given point.

I've managed to find Display Location guide and also saw numerous posts regarding retrieving it using SQL query. My database containing, name of the item, address (to find alt,lon), alt, lon and description. How do I use the stored alt, lon to retrieve only the ones in, let's say 50km radius.

Here is my code:

javascript

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(31.046051, 34.85161199999993);
    var myOptions = {
        zoom: 7,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function updateCoordinates(latlng)
{
  if(latlng) 
  {
    document.getElementById('lat').value = latlng.lat();
    document.getElementById('lng').value = latlng.lng();
  }
}

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            updateCoordinates(results[0].geometry.location);
            if (marker) marker.setMap(null);
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                draggable: true
            });

            google.maps.event.addListener(marker, "dragend", function() {
                updateCoordinates(marker.getPosition());
            });

        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

  

  
  function showPositionCoupons(sentlat, sentlon)
  {
  lat=sentlat;
  lon=sentlon;
  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('map_canvas')

  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  }

I think I need to use showPositionCoupons() in a loop maybe, while reading alt and lon? Thanks for any help given, I know it's frequent question yet I couldn't manage to solve it using what exists.

I've tried to use Display Location guide DisplayLocations() method, yet it didn't work for me, though the way the locations presented there is perfect, only need to exclude the ones out of radius bounds.

• javascript
• google-maps
• geolocation

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Aug 26, 2012 at 8:16 Shahar GalukmanShahar Galukman 90233 gold badges1616 silver badges3636 bronze badges 1

• 4 Instead of menting, edit your post! :) – starbeamrainbowlabs Commented Aug 26, 2012 at 8:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Might not exactly be what you where expecting, but I hope it might help nonetheless. Going from the link you've posted, I take you're using PHP/MySQL.

And if that's true, I would just use PHP/MySQL to fetch the correct results, and then afterwards display them on a Google map.

Much more efficient if you can do the calculations without needing an external service.

// PHP/MySQL code
$sourceLat = '';
$sourceLon = '';
$radiusKm  = 50;

$proximity = mathGeoProximity($sourceLat, $sourceLon, $radiusKm);
$result    = mysql_query("
    SELECT * 
    FROM   locations
    WHERE  (lat BETWEEN " . number_format($proximity['latitudeMin'], 12, '.', '') . "
            AND " . number_format($proximity['latitudeMax'], 12, '.', '') . ")
      AND (lon BETWEEN " . number_format($proximity['longitudeMin'], 12, '.', '') . "
            AND " . number_format($proximity['longitudeMax'], 12, '.', '') . ")
");

// fetch all record and check wether they are really within the radius
$recordsWithinRadius = array();
while ($record = mysql_fetch_assoc($result)) {
    $distance = mathGeoDistance($sourceLat, $sourceLon, $record['lat'], $record['lon']);

    if ($distance <= $radiusKm) {
        $recordsWithinRadius[] = $record;
    }
}

// and then print your results using a google map
// ...


// calculate geographical proximity
function mathGeoProximity( $latitude, $longitude, $radius, $miles = false )
{
    $radius = $miles ? $radius : ($radius * 0.621371192);

    $lng_min = $longitude - $radius / abs(cos(deg2rad($latitude)) * 69);
    $lng_max = $longitude + $radius / abs(cos(deg2rad($latitude)) * 69);
    $lat_min = $latitude - ($radius / 69);
    $lat_max = $latitude + ($radius / 69);

    return array(
        'latitudeMin'  => $lat_min,
        'latitudeMax'  => $lat_max,
        'longitudeMin' => $lng_min,
        'longitudeMax' => $lng_max
    );
}

// calculate geographical distance between 2 points
function mathGeoDistance( $lat1, $lng1, $lat2, $lng2, $miles = false )
{
    $pi80 = M_PI / 180;
    $lat1 *= $pi80;
    $lng1 *= $pi80;
    $lat2 *= $pi80;
    $lng2 *= $pi80;

    $r = 6372.797; // mean radius of Earth in km
    $dlat = $lat2 - $lat1;
    $dlng = $lng2 - $lng1;
    $a = sin($dlat / 2) * sin($dlat / 2) + cos($lat1) * cos($lat2) * sin($dlng / 2) * sin($dlng / 2);
    $c = 2 * atan2(sqrt($a), sqrt(1 - $a));
    $km = $r * $c;

    return ($miles ? ($km * 0.621371192) : $km);
}

And then do with the results what you want. You can even implement this solution via an AJAX call if you'd need it on the fly.

UPDATE: How to output records as json

// add this to the above php script
header('Content-type: application/json');
echo json_encode( $recordsWithinRadius );
exit();

UPDATE: How to load the json via an AJAX call in jquery

// javascript/jquery code
$(document).ready(function()
{
    $.getJSON('http://yourserver/yourscript.php', function(data)
    {
        $.each(data, function(key, record) {
            // do something with record data
            console.log(record);
        });
    });
});

For each point you have to calculate the distance to your center-point (There's also a Google Service for that). Then only draw points with distance <= 50km.

本文标签： javascriptDisplay all locations from database within a given radiusStack Overflow