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 )