javascript - obtener - Regrese 3 ubicaciones más cercanas a la ubicación de un usuario(geolocalización) y enumere las ubicaciones para ellas

hacer geolocalizacion

Question

Fondo:

Estoy trabajando en un sitio web / aplicación creado con HTML / CSS / Javascript que utilizará la geolocalización (Google Maps API) para encontrar la ubicación de un usuario (geolocalización) y devolverlos, por ejemplo, los 5 parques acuáticos más cercanos a ellos en esa ubicación Actualmente están en modo que podrán navegar a uno de esos lugares. Estoy usando Google Fusion Tables para devolverles los resultados.

Pregunta:

He sido capaz de ...

• Encuentra la ubicación de los usuarios y coloca un marcador allí (usando Map API / geolocation)
• Devuelve 3 de 5 ubicaciones y pon marcadores para esos 3 (utilicé Fusion Tables y resultados limitados para 3)

Quiero ser capaz de ...

1. Devuelva solo las 3 ubicaciones más cercanas al usuario (es decir, calcule la distancia desde la ubicación de los usuarios hasta el parque acuático más cercano)
2. Ponga una "barra lateral" o una lista de esas 3 ubicaciones , detallando el nombre, la dirección y otros campos de mi Fusion Table

Hice un violín debajo de este código con lo que tengo hasta ahora. El código a continuación es mi consulta de Fusion Table, que supongo que es a lo que tendré que hacer los cambios para obtener las 3 ubicaciones más cercanas (pregunta n. ° 1). La pregunta n. ° 2, que enumera esos lugares, podría usar todo el código que tengo en mi Fiddle.

var base_query = {
    select: ''Location'',
    from: ''1MsmdOvWLKNNrtKnmoEf2djCc3Rp_gYmueN4FGnc'',
    limit: 3
};

var ftLayer = new google.maps.FusionTablesLayer({
    map: map,
    query: $.extend({}, base_query)
});

var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < base_query.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(base_query[i][1], base_query[i][2]),
        map: map
    });

    google.maps.event.addListener(marker, ''click'', (function (marker, i) {
        return function () {
            infowindow.setContent(base_query[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
};

var signChange = function () {
    var options = {
        query: $.extend({}, base_query)
    };
};

http://jsfiddle.net/jamez14/bRLaH/2/

Cualquier ayuda sería apreciada. He estado investigando sobre esta cuestión por algún tiempo, pero por alguna razón no puedo reconstruir todo. ¡Cualquier ayuda / recurso sería muy apreciada!

Answer 1

Puedes usar la API de Google Places.

Documentos: https://developers.google.com/places/documentation/search

Tipos de ubicaciones compatibles: https://developers.google.com/places/documentation/supported_types

Después de haber recibido la ubicación de los usuarios, realice una solicitud como esa con su ubicación y tipos relevantes:

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AddYourOwnKeyHere

Aquí hay un violín basado en el tuyo, sin usar tablas de fusión: http://jsfiddle.net/iambnz/M9KrK/

Agregue esto a su llamada a la biblioteca:

&libraries=places

Agregue esto a su código:

Var global:

var service;

Indicación If cuando encontraste la ubicación de los usuarios:

var request = { location: pos, radius: ''500'', types: [''store''] };

service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);  

Después de los mapas init:

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

   function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  }); 
}

Espero que esto te indique la dirección correcta.

Ejemplo con uso de la barra lateral + FT de @geocodezip: http://www.geocodezip.com/geoxml3_test/v3_FusionTables_Watershed_Stewards_Map_sidebar2.html

Answer 2

Relacionado con 1. (2. ha sido respondido en los comentarios por geocodezip)

Use una relación espacial en el orderBy -opción de base_query .

orderBy: ''ST_DISTANCE(Coordinates, LATLNG(lat,lng))

... donde lat y lng tienen que rellenarse con los valores devueltos por navigator.geolocation (lo que significa que debe crear la capa o al menos establecer la consulta para la capa en la devolución de llamada de navigator.geolocation.getCurrentPosition )