Google Maps Entfernungsrechner MIT Geolocation

Ich habe eine kleine Web-App, die den Abstand zwischen zwei Punkten auf Google Maps berechnen kann.Google Maps Entfernungsrechner MIT Geolocation

Ich möchte es den Benutzer an seiner aktuellen Position platzieren, wenn die App geladen wird. Ich habe mit verschiedenen Geolocation-Methoden ohne Glück versucht.

Die beste Sache wäre es, die Entfernung von der Benutzerposition berechnen zu lassen. Aber nur die Positionierung der Nutzer in der Web-App reicht mir.

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

Quelle

2012-10-16 user1749428

müssen Sie diese 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

Quelle

2012-10-16 09:23:20

Ich habe versucht, das letzte Glied Sie auf dem Laufenden (der erste war nicht wirklich über Geolocation) – user1749428

Aber der Code, den ich geschrieben Werke in meiner Frage. Ich muss nur die Geolocation hinzufügen. – user1749428

@ user1749428, haben Sie den obigen Code versucht? –

versuchen, die Position des Benutzers zu erhalten mit Hilfe von 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.

Siehe http://jsfiddle.net/Stouffi/FCFSW/, zum Beispiel.

UPDATE:

Youd brauchen die Onclick Rückruf Ihrer calcRoute Taste ändern. Das neue wird die Position des Benutzers anfordern. Sobald die Position erfasst ist, wird calcRoute aufgerufen.

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

In calcRoute, Position Objekt als Argument zur Verfügung stehen wird, müssen Sie ihn in ein LatLng-Objekt konvertieren mit Google Richtungen Dienst zu beschäftigen.

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.

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

Quelle

2012-10-16 09:33:42 Stouffi

Great! Er bittet mich, jetzt auf meinen Standort zuzugreifen. Ich muss nur wissen, wo ich das in meinen Code eingeben muss, damit es auf der Karte erscheint. Entschuldigung für die JS Rookie Fragen .. – user1749428

@ user1749428 - Was sind die erwarteten Werte in Ihren Eingabefeldern? String, Breite und Länge oder beides? – Stouffi

Ich denke beide. Benutzer können Namen von Städten, Adressen usw. eingeben. Keine Koordinaten. – user1749428

Google Maps Entfernungsrechner MIT Geolocation

Antwort

Verwandte Themen