Calcolatore di distanza di Google Maps con geolocalizzazione

Ho una piccola app web in grado di calcolare la distanza tra due punti su Google maps.Calcolatore di distanza di Google Maps con geolocalizzazione

Vorrei mettere l'utente nella posizione corrente durante il caricamento dell'app. Ho provato con diversi metodi di geolocalizzazione senza fortuna.

La cosa migliore sarebbe avere il calcolo della distanza dalla posizione dell'utente. Tuttavia, avere solo la posizione degli utenti nell'app web sarà sufficiente per me.

<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>

fonte

2012-10-16 user1749428

è necessario provare questo link

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; 
}

distance-finder-google-maps-api

fonte

2012-10-16 09:23:20

ho cercato l'ultimo anello che hai postato (il primo non era davvero di geolocalizzazione) – user1749428

Ma il codice che ho postato nei miei lavori questione. Devo solo aggiungere la geolocalizzazione. – user1749428

@ user1749428, hai provato il codice sopra? –

Per ottenere la posizione dell'utente tramite 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.

Vedi http://jsfiddle.net/Stouffi/FCFSW/, per esempio.

UPDATE:

Youd bisogno di cambiare la richiamata onclick del pulsante calcRoute. Il nuovo richiederà la posizione dell'utente. Una volta acquisita la posizione, viene chiamato calcRoute.

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

In calcRoute, oggetto posizione sarà disponibile come argomento, è necessario convertire gli in un oggetto LatLng a che fare con il servizio direzioni google.

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.

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

fonte

2012-10-16 09:33:42 Stouffi

Grande! Mi sta chiedendo di accedere alla mia posizione ora. Ho solo bisogno di sapere dove metterlo nel mio codice, per farlo apparire sulla mappa. Ci scusiamo per le domande del rookie JS .. – user1749428

@ user1749428 - Quali sono i valori previsti nei campi di input? stringa, latitudine e longitudine o entrambi? – Stouffi

Entrambi credo. Gli utenti possono inserire nomi di città, indirizzi, ecc. Non coordinate. – user1749428

Calcolatore di distanza di Google Maps con geolocalizzazione

risposta

Problemi correlati