Google Maps calculateur de distance AVEC la géolocalisation

J'ai une petite application web qui permet de calculer la distance entre deux points sur une carte Google maps.

Je tiens à mettre l'utilisateur dans sa position actuelle lors du chargement de l'application. J'ai essayé avec différentes méthodes de géolocalisation sans un peu de chance.

La meilleure chose serait de l'avoir calculez la distance depuis la position utilisateurs. Toutefois, les utilisateurs de la position dans l'application web sera suffisant pour moi. 

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var copenhagen = new google.maps.LatLng(55.6771, 12.5704);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: copenhagen
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
var directionsService = new google.maps.DirectionsService();
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
}
});
}
</script>
<title>Distance Calculator</title>
<style type="text/css">
body {
font-family:Helvetica, Arial;
}
#map_canvas {
height: 50%;
}
</style>
</head>
<body>
<body onload="initialize()">
<p>Enter your current location and desired destination to get the distance</p>
<div>
<p>
<label for="start">Start: </label>
<input type="text" name="start" id="start" />
<label for="end">End: </label>
<input type="text" name="end" id="end" />
<input type="submit" value="Calculate Route" onclick="calcRoute()" />
</p>
<p>
<label for="distance">Distance (km): </label>
<input type="text" name="distance" id="distance" readonly="true" />
</p>
</div>
<div id="map_canvas"></div>
</body>
</html>

OriginalL'auteur user1749428 | 2012-10-16

  1. 1

    vous devez essayer ce lien

    google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
//setup our variables
var lat1 = this.lat();
var radianLat1 = lat1 * ( Math.PI  / 180 );
var lng1 = this.lng();
var radianLng1 = lng1 * ( Math.PI  / 180 );
var lat2 = newLatLng.lat();
var radianLat2 = lat2 * ( Math.PI  / 180 );
var lng2 = newLatLng.lng();
var radianLng2 = lng2 * ( Math.PI  / 180 );
//sort out the radius, MILES or KM?
var earth_radius = 3959; //(km = 6378.1) OR (miles = 3959) - radius of the earth
//sort our the differences
var diffLat =  ( radianLat1 - radianLat2 );
var diffLng =  ( radianLng1 - radianLng2 );
//put on a wave (hey the earth is round after all)
var sinLat = Math.sin( diffLat / 2  );
var sinLng = Math.sin( diffLng / 2  ); 
var a = Math.pow(sinLat, 2.0) + Math.cos(radianLat1) * Math.cos(radianLat2) * Math.pow(sinLng, 2.0);
//work out the distance
var distance = earth_radius * 2 * Math.asin(Math.min(1, Math.sqrt(a)));
//return the distance
return distance;
}

    la distance de recherche-google-maps-api

    J'ai essayé le dernier lien que vous avez posté (le premier n'était pas vraiment sur la géolocalisation)
    Mais le code que j'ai posté dans ma question œuvres. J'ai juste besoin d'ajouter de la géolocalisation.
    avez-vous essayé le code ci-dessus?
    Oui... impossible de le faire fonctionner avec mon code existant :S Ce serait génial si quelqu'un pouvait essayer de travailler avec mon propre code (publié dans la question)

    OriginalL'auteur Pragnesh Chauhan

  2. 1

    Pour obtenir la position de l'utilisateur à l'aide de javascript :

    var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//Do whatever you want with userLatLng.
}
navigator.geolocation.getCurrentPosition(showPosition); //Attach showPosition Callback which will be executed as soon as position is available. Remember it needs user confirmation.

    Voir http://jsfiddle.net/Stouffi/FCFSW/, par exemple.

    Mise à JOUR:

    Youd besoin de changer le onclick de rappel de votre calcRoute bouton. La nouvelle demande de l'utilisateur du poste. Une fois que la position est acquise, calcRoute est appelé.

    function findCurrentLocation() {
navigator.geolocation.getCurrentPosition(calcRoute);
}

    Dans calcRoute, la position de l'objet sera disponible comme argument, vous devez le convertir en un LatLng objet à traiter avec google les directions de service.

    function calcRoute(currentLocation) {
//create a LatLng object from the position object.
var start = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude);
//Continue with your original code.
var end = document.getElementById("end").value;
//etc.

    Voir http://jsfiddle.net/Stouffi/mCYTf/

    Super! Sa me demandant à accéder à mon emplacement. J'ai juste besoin de savoir où mettre ceci dans mon code, pour en faire apparaître sur la carte. Désolé pour le JS recrue questions..
    Quelles sont les valeurs attendues dans votre champs de saisie ? chaîne, de la latitude et de la longitude, ou les deux ?
    Les deux, je suppose. Les utilisateurs peuvent entrer des noms de villes, des adresses, etc. Pas de coordonnées.
    Avez-vous lu le mise à jour réponse? Est-ce cela que vous vouliez?
    Je pense que oui! Je vais avoir quelques problèmes de mettre le code mais... Pouvez-vous m'aider en prenant mon code d'origine de ma question de le modifier avec vos suggestions? Merci 🙂

    OriginalL'auteur Stouffi