logo标签列表

JavaScript中两个位置之间的距离

javascriptjquerygoogle-mapsgoogle-maps-api-3
3

请问有谁能帮我看看这段代码出了什么问题吗？我的最终目标是使用Google的JavaScript API来寻找两个位置之间的距离。我已经使用了geocomplete jQuery函数进行地址自动完成。但点击搜索按钮后没有反应。由于我只是一个初学者，请帮帮我。

<!DOCTYPE html>
<html>
  <head>
    <title>Distance between Two Places</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css" />
     <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>
     <script type="text/javascript">

    var geocoder, location1, location2;

    function initialize() {
        geocoder = new GClientGeocoder();
    }

    function showLocation() {
        geocoder.getLocations(document.forms[0].address1.value, function (response) {
            if (!response || response.Status.code != 200)
            {
                alert("Sorry, we were unable to geocode the first address");
            }
            else
            {
                location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                geocoder.getLocations(document.forms[0].address2.value, function (response) {
                    if (!response || response.Status.code != 200)
                    {
                        alert("Sorry, we were unable to geocode the second address");
                    }
                    else
                    {
                        location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                        calculateDistance();
                    }
                });
            }
        });
    }

    function calculateDistance()
    {
        try
        {
            var glatlng1 = new GLatLng(location1.lat, location1.lon);
            var glatlng2 = new GLatLng(location2.lat, location2.lon);
            var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
            var kmdistance = (miledistance * 1.609344).toFixed(1);

            document.getElementById('results').innerHTML = '<strong>Distance: </strong>' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';
        }
        catch (error)
        {
            alert(error);
        }
    }



    </script>
  </head>
  <body onload="initialize()">

    <form action="#" onsubmit="showLocation(); return false;">
      <input id="geocomplete" type="text" name="address1" placeholder="Type in an address" size="90" />
        <input id="geocomplete1" type="text" name="address2" placeholder="Type in an address" size="90" />
     <input type="submit" name="find" value="Search" />
    </form>

   <p id="results"></p>

    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script src="../jquery.geocomplete.js"></script>
    <script src="logger.js"></script>

    <script>
      $(function(){

        $("#geocomplete").geocomplete()
          .bind("geocode:result", function(event, result){
            $.log("Result: " + result.formatted_address);
          })
          .bind("geocode:error", function(event, status){
            $.log("ERROR: " + status);
          })
          .bind("geocode:multiple", function(event, results){
            $.log("Multiple: " + results.length + " results found");
          });

          $("#geocomplete1").geocomplete()
          .bind("geocode:result", function(event, result){
            $.log("Result: " + result.formatted_address);
          })
          .bind("geocode:error", function(event, status){
            $.log("ERROR: " + status);
          })
          .bind("geocode:multiple", function(event, results){
            $.log("Multiple: " + results.length + " results found");
          });

        $("#find").click(function(){
          $("#geocomplete").trigger("geocode");
        });


        $("#examples a").click(function(){
          $("#geocomplete").val($(this).text()).trigger("geocode");
          return false;
        });

      });
    </script>
  </body>
</html>
1
您正在使用已被弃用（并已关闭）的Google Maps JavaScript API v2。新代码应在Google Maps JavaScript API v3中开发（实际上，您正在包含两个版本，它们不兼容，因此永远不应同时包含它们，除非您确实知道自己在做什么）。 - geocodezip
4个回答
9
你可以使用谷歌地图的距离矩阵服务来计算两点之间的距离。
以下函数用于计算
function calculateDistances() {
  origin = document.getElementById('source').value; //Get the source string
  destination = document.getElementById('dest').value; //Get the destination string
  var service = new google.maps.DistanceMatrixService(); //initialize the distance service
  service.getDistanceMatrix(
    {
      origins: [origin], //set origin, you can specify multiple sources here
      destinations: [destination],//set destination, you can specify multiple destinations here
      travelMode: google.maps.TravelMode.DRIVING, //set the travelmode
      unitSystem: google.maps.UnitSystem.METRIC,//The unit system to use when displaying distance
      avoidHighways: false,
      avoidTolls: false
    }, calcDistance); // here calcDistance is the call back function
}

回调函数calcDistance的代码

function calcDistance(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) { // check if there is valid result
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    deleteOverlays();

    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;

      for (var j = 0; j < results.length; j++) {

        alert ('Distance from '+origins[i] + ' to ' + destinations[j]
            + ': ' + results[j].distance.text ); // alert the result
      }
    }
  }
}

你可以在这里找到一个可工作的演示链接

这太棒了。运行得很好！ - Jake
如果编辑尚未更新，请确保省略行deleteOverlays();或定义它。我还给了你+1，因为除此之外，这是正确的答案。 - user7923788
5

当你调用 calculateDistance() 函数时，将 location1 和 location2 作为参数传入。

var earthRadius = 6371;

function calculateDistance(posA, posB) {
    var lat = posB.lat-posA.lat; // Difference of latitude
    var lon = posB.lon-posA.lon; // Difference of longitude

    var disLat = (lat*Math.PI*earthRadius)/180; // Vertical distance
    var disLon = (lon*Math.PI*earthRadius)/180; // Horizontal distance

    var ret = Math.pow(disLat, 2) + Math.pow(disLon, 2); 
    ret = Math.sqrt(ret); // Total distance (calculated by Pythagore: a^2 + b^2 = c^2)

    // Now you have the total distance in the variable ret
}
只是提一下，这个计算的距离单位是公里。 - Danny Beckett
2

你也可以直接使用api v3中公开的computeDistanceBetween()函数。相关文档可以在这里查看。

该函数需要两个经纬度作为参数，并返回两点之间的距离（以米为单位）。

这个源代码在任何地方都可以查看吗？ - Chris
1
在你的 JavaScript 开始处添加以下内容：

：

google.maps.LatLng.prototype.distanceFrom = function(latlng) {
  var lat = [this.lat(), latlng.lat()]
  var lng = [this.lng(), latlng.lng()]
  var R = 6378137;
  var dLat = (lat[1]-lat[0]) * Math.PI / 180;
  var dLng = (lng[1]-lng[0]) * Math.PI / 180;
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
  Math.cos(lat[0] * Math.PI / 180 ) * Math.cos(lat[1] * Math.PI / 180 ) *
  Math.sin(dLng/2) * Math.sin(dLng/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;
  return Math.round(d);
}

然后像这样使用函数：
var loc1 = new GLatLng(52.5773139, 1.3712427);
var loc2 = new GLatLng(52.4788314, 1.7577444);
var dist = loc2.distanceFrom(loc1);
alert(dist/1000);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接