Google API路线服务,转换为米

时间:2016-02-18 20:26:59

标签: google-maps google-maps-api-3

我正在使用路线服务来计算使用地址查找的两个地址之间的距离,这一切似乎都运行正常,我唯一的问题是如果您搜索相同的拾取和目的地的示例,它将返回12米(米)而不是公里,所以它给了我错误的计算,用于以米为单位返回值的非常短的旅程。

有没有办法可以让它只发送KM?

(另外,不确定是否有可能在Miles中获得价值,就像我从KM转换它一样)

以下是代码: -

var location1;
var location2;

var address1;
var address2;

var latlng;
var geocoder;
var map;

var distance;

// finds the coordinates for the two locations and calls the showMap() function
function initialize()
{
    geocoder = new google.maps.Geocoder(); // creating a new geocode object

    // getting the two address values
    address1 = document.getElementById("pstreet").value;
    address2 = document.getElementById("dstreet").value;

    // finding out the coordinates
    if (geocoder) 
    {
        geocoder.geocode( { 'address': address1}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                //location of first address (latitude + longitude)
                location1 = results[0].geometry.location;
            } else 
            {
                //alert("Geocode was not successful for the following reason: " + status);
            }
        });
        geocoder.geocode( { 'address': address2}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                //location of second address (latitude + longitude)
                location2 = results[0].geometry.location;
                // calling the showMap() function to create and show the map 
                showMap();
            } else 
            {
                //alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
}

// creates and shows the map
function showMap()
{
    // center of the map (compute the mean value between the two locations)
    latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

    // set map options
        // set zoom level
        // set center
        // map type
    var mapOptions = 
    {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    // create a new map object
        // set the div id where it will be shown
        // set the map options
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    // show route between the points
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer(
    {
        suppressMarkers: true,
        suppressInfoWindows: true
    });
    directionsDisplay.setMap(map);
    var request = {
        origin:location1, 
        destination:location2,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) 
    {
        if (status == google.maps.DirectionsStatus.OK) 
        {
            directionsDisplay.setDirections(response);
            distance = response.routes[0].legs[0].distance.text;
            console.log(distance);
            distance_KM = distance.slice(0, -2); // remove KM from kilometers to get KM int
            nearest_KM = Math.round(distance_KM);

            // Convert kilometers into mileage
            var km = parseFloat(nearest_KM);
            var mi = "";
            if (!isNaN(km)) mi = km * 0.621371192;

            distance_MI = Math.round(mi);

            $('#mileage').html(distance_MI);

            driving_time = "Aproximative driving time is: "+response.routes[0].legs[0].duration.text;
            $('#time').html(driving_time);

        }
    });

    // compute distance between the two points
    var R = 6371; 
    var dLat = toRad(location2.lat()-location1.lat());
    var dLon = toRad(location2.lng()-location1.lng()); 

    var dLat1 = toRad(location1.lat());
    var dLat2 = toRad(location2.lat());

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(dLat1) * Math.cos(dLat1) * 
            Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c;

}

function toRad(deg) 
{
    return deg * Math.PI/180;
}

1 个答案:

答案 0 :(得分:2)

而不是:

response.routes[0].legs[0].distance.text;

使用:

response.routes[0].legs[0].distance.value;

总是以米为单位。

distance = response.routes[0].legs[0].distance.value; // meters
distance_KM = distance / 1000; // convert to kilometers

来自the documentation

  

google.maps.Distance对象规范

     

将距离表示为数值和显示字符串。

     

<强>属性

           

|输入:数字

     

以米为单位的距离。

proof of concept fiddle

代码段

&#13;
&#13;
var location1;
var location2;

var address1;
var address2;

var latlng;
var geocoder;
var map;

var distance;

// finds the coordinates for the two locations and calls the showMap() function
function initialize() {
  geocoder = new google.maps.Geocoder(); // creating a new geocode object

  // getting the two address values
  address1 = document.getElementById("pstreet").value;
  address2 = document.getElementById("dstreet").value;

  // finding out the coordinates
  if (geocoder) {
    geocoder.geocode({
      'address': address1
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        //location of first address (latitude + longitude)
        location1 = results[0].geometry.location;
      } else {
        //alert("Geocode was not successful for the following reason: " + status);
      }
    });
    geocoder.geocode({
      'address': address2
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        //location of second address (latitude + longitude)
        location2 = results[0].geometry.location;
        // calling the showMap() function to create and show the map 
        showMap();
      } else {
        //alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}

// creates and shows the map
function showMap() {
  // center of the map (compute the mean value between the two locations)
  latlng = new google.maps.LatLng((location1.lat() + location2.lat()) / 2, (location1.lng() + location2.lng()) / 2);

  // set map options
  // set zoom level
  // set center
  // map type
  var mapOptions = {
    zoom: 1,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };

  // create a new map object
  // set the div id where it will be shown
  // set the map options
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  // show route between the points
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppressInfoWindows: true
  });
  directionsDisplay.setMap(map);
  var request = {
    origin: location1,
    destination: location2,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      distance = response.routes[0].legs[0].distance.value;
      console.log(distance);
      distance_KM = distance / 1000; // remove KM from kilometers to get KM int
      nearest_KM = Math.round(distance_KM);

      // Convert kilometers into mileage
      var km = parseFloat(nearest_KM);
      var mi = "";
      if (!isNaN(km)) mi = km * 0.621371192;

      distance_MI = Math.round(mi);

      $('#mileage').html(distance_MI + " miles");

      driving_time = "Aproximative driving time is: " + response.routes[0].legs[0].duration.text;
      $('#time').html(driving_time);

    }
  });
}

google.maps.event.addDomListener(window, "load", initialize);
&#13;
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<input id="pstreet" value="New York,NY" />
<input id="dstreet" value="Newark, NJ" />
<input type="button" onclick="initialize()" value="recalculate" />
<div id="mileage"></div>
<div id="time"></div>
<div id="map_canvas"></div>
&#13;
&#13;
&#13;