谷歌地圖距離計算器與地理位置

我有一個小型的網絡應用程序，可以計算谷歌地圖上兩點之間的距離。谷歌地圖距離計算器與地理位置

我希望它在加載應用程序時將用戶置於當前位置。我嘗試過不同的地理定位方法，沒有任何運氣。

最好的辦法是讓它計算距離用戶位置的距離。但是，僅僅讓用戶在網絡應用中的位置對我來說就足夠了。

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

來源

2012-10-16 user1749428

你需要嘗試這個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

來源

2012-10-16 09:23:20

我已經試過您發佈的最後一個環節（第一個是不是真正的地理定位） – user1749428

但代碼我張貼在我的問題的作品。我只需要添加地理位置。 – user1749428

@ user1749428，你試過上面的代碼嗎？ –

要使用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.

見http://jsfiddle.net/Stouffi/FCFSW/，例如。

UPDATE：

你幾乎需要更改calcRoute按鈕的onclick回調。新的將要求用戶的位置。一旦獲得位置，calcRoute被調用。

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

在calcRoute，位置對象將作爲參數，你需要給他轉換成一個經緯度對象對付谷歌路線服務。

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.

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

來源

2012-10-16 09:33:42 Stouffi

太棒了！它要求我現在訪問我的位置。我只需要知道將它放在我的代碼中的哪個位置，以使其顯示在地圖上。對不起JS新手問題。 – user1749428

@ user1749428 - 輸入字段中的期望值是多少？字符串，經緯度還是兩者？ – Stouffi

我都猜到了。用戶可以輸入城市名稱，地址等。不是座標。 – user1749428

谷歌地圖距離計算器與地理位置

回答

相關問題