Trouver le plus proche de marqueur à mon géolocalisation Google Maps API V3
J'ai un script qui montre une carte Google map j'ai mis en place dans ma page, actuellement, il montre une série de marqueurs généré par un radar de recherche. Je crois que j'ai mis ces marqueurs générés dans un tableau mais je ne suis pas sûr de la façon de le faire. J'ai aussi regardé la "haversine formule", comme cela semble être un moyen de calcul de la distance entre la Géolocalisation et des points dans le tableau. Je veux être en mesure d'utiliser l'Id de balise "#findMe" pour effectuer la recherche, de sorte cliquant dessus, il va trouver le plus proche de marqueur pour ma géolocalisation, puis imprimer une alerte avec elle. J'ai eu une fissure à faire l'api google construit dans la méthode, mais je pense encore une fois j'ai besoin de mettre des marqueurs dans un tableau.
MODIFIÉ le CODE - ce droit Est-il le Dr Molle?
jQuery(function($){
var $overlay = $('.overlay'),
resize = true,
map;
var service;
var marker = [];
var pos;
var infowindow;
var placeLoc
function initialize() {
/*var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}*/
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var request = {
location:pos,
radius:1000,
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'You Are Here'
});
$('#findMe').data('pos',pos);
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
//Browser doesn't support Geolocation
handleNoGeolocation(false);
}
function callback(results, status) {
var markers = [];
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
markers.push(createMarker(results[i]));
}
}
$('#findMe').data('markers',markers);
}
}
function createMarker(place) {
placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
fillColor:'00a14b',
fillOpacity:0.3,
fillStroke: '00a14b',
strokeWeight:4,
strokeOpacity: 0.7
},
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
return marker;
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#show').click(function(){
$overlay.show();
if ( resize ){
google.maps.event.trigger(map, 'resize');
resize = false;
}
});
$('.overlay-bg').click(function(){
$overlay.hide();
});
$( "#findMe" ).click(function() {
var pos = $(this).data('pos'),
markers = $(this).data('markers'),
closest;
if(!pos || !markers){
return;
}
$.each(markers,function(){
var distance=google.maps.geometry.spherical
.computeDistanceBetween(this.getPosition(),pos);
if(!closest || closest.distance > distance){
closest={marker:this,
distance:distance}
}
});
if(closest){
//closest.marker will be the nearest marker, do something with it
//here we simply trigger a click, which will open the InfoWindow
google.maps.event.trigger(closest.marker,'click')
}
});
});
OriginalL'auteur Mr Dansk | 2014-02-07
Vous devez vous connecter pour publier un commentaire.
Remplir un tableau avec ces marqueurs:
laisser le createMarker-de retour de la fonction du marqueur, ajouter ceci à la fin de la fonction:
stocker le tableau (par exemple, bases de données de propriété de #findMe )
également stocker la position renvoyée par géolocalisation quelque part, (par exemple, aussi que les données de #findMe):
Pour trouver le plus proche de repère, vous pouvez utiliser la méthode
computeDistanceBetween
-méthode de la géométrie de la bibliothèque(n'oubliez pas de charger la bibliothèque, il n'est pas chargé par défaut)L'modifié le code est correct. avez-vous de la charge de la géométrie de la bibliothèque? Démo: jsfiddle.net/wwPc6
'<script type="text/javascript" src="maps.googleapis.com/maps/api/js?v=3.exp&key=KEYHERE &capteur=true&bibliothèques=places,de la géométrie"></script> " est-ce correct? C'est ce que j'ai déjà dans la page HTML. KEYHERE est ma clé api.
La seule chose que je n'ai pas compris est le '<input id="findMe" type="button" value="trouver la place la plus proche"> " qui se trouve sur votre jsfiddle.
OriginalL'auteur Dr.Molle