Google Maps DistanceMatrix

Question

Я использую API Google, мне нужно сделать два разных расстояния в милях. В настоящий момент у меня есть следующее: -

var start = arrObjLatLngs[0]; 
var end = arrObjLatLngs[arrObjLatLngs.length - 1]; 

var base = new google.maps.LatLng(52.781048888889, -1.2110222222222546); 

var service = new google.maps.DistanceMatrixService(); 
service.getDistanceMatrix(
    { 
    origins: [base, base], 
    destinations: [start, end], 
    travelMode: google.maps.TravelMode.DRIVING, 
    avoidHighways: false, 
    avoidTolls: false 
    }, callback); 


function callback(response, status) { 
    if (status == google.maps.DistanceMatrixStatus.OK) { 
    var origins = response.originAddresses; 
    var destinations = response.destinationAddresses; 

    for (var i = 0; i < origins.length; i++) { 
     var results = response.rows[i].elements; 
     for (var j = 0; j < results.length; j++) { 
     var element = results[j]; 
     var distance = element.distance.text; 
     var duration = element.duration.text; 
     var from = origins[i]; 
     var to = destinations[j]; 
     } 
    } 
    } 
} 

Что мне нужно, это две переменные; $runinPickup и $runinDestination, который содержит расстояние между 1.) основаниями и начать (который будет $ runinPickup) и 2) основание и конец (который будет $ runinDestination)

Если я предупрежу distance я получаю ответ: -

13,9 км

5,2 км

13,9 км

5,2 км

Во-первых, я просто хочу знать, как я могу получить расстояние только от base до start как $ runinPickup. Во-вторых, есть ли способ, которым я могу это сделать, поэтому он не включает десятичное число? Таким образом, вместо 13,9 км для первого значения, это только будет 13.

Тогда мне нужно, чтобы преобразовать его в мили, которые я предполагаю, что когда-то я могу получить значение, я бы это следующим образом:

var pickup_distance = parseInt(($fieldPickup/8) * 5); ? 

Любая помощь будет очень признательна! :)

Answer 1

Вы прочитали (а) documentation? Прохождение одного и того же адреса дважды в исходном массиве:

origins: [base, base], 
    destinations: [start, end], 

Собираюсь дать вам тот же результат дважды. Это должно работать (не проверено), и даст вам 2 результатов:

origins: [base], 
    destinations: [start, end], 

Для того, чтобы получить мили я хотел бы предложить настройки unitSystem к IMPERIAL (хотя я не могу найти определение того, что это означает, что в документации):

unitSystem (optional) — The unit system to use when displaying distance. Accepted values are: 

google.maps.UnitSystem.METRIC (default) 
google.maps.UnitSystem.IMPERIAL 

Вы можете, конечно, convert METRIC units to miles.

Example showing the two values, с расстояниями в ИМПЕРИАЛ. Изменено из примера в документации.

фрагмент кода:

var map; 
 
var geocoder; 
 
var bounds = new google.maps.LatLngBounds(); 
 
var markersArray = []; 
 

 
var base = new google.maps.LatLng(55.930385, -3.118425); 
 
var start = 'Greenwich, England'; 
 
var destinationA = 'Stockholm, Sweden'; 
 
var end = new google.maps.LatLng(50.087692, 14.421150); 
 

 
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000'; 
 
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000'; 
 

 
function initialize() { 
 
    var opts = { 
 
    center: new google.maps.LatLng(55.53, 9.4), 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map'), opts); 
 
    geocoder = new google.maps.Geocoder(); 
 
    calculateDistances(); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
function calculateDistances() { 
 
    var service = new google.maps.DistanceMatrixService(); 
 
    service.getDistanceMatrix({ 
 
    origins: [base], 
 
    destinations: [start, end], 
 
    travelMode: google.maps.TravelMode.DRIVING, 
 
    unitSystem: google.maps.UnitSystem.IMPERIAL, 
 
    avoidHighways: false, 
 
    avoidTolls: false 
 
    }, callback); 
 
} 
 

 
function callback(response, status) { 
 
    if (status != google.maps.DistanceMatrixStatus.OK) { 
 
    alert('Error was: ' + status); 
 
    } else { 
 
    var origins = response.originAddresses; 
 
    var destinations = response.destinationAddresses; 
 
    var outputDiv = document.getElementById('outputDiv'); 
 
    outputDiv.innerHTML = '<table border="1">'; 
 
    deleteOverlays(); 
 
    var stringArray = ['$runinPickup', '$runinDestination']; 
 
    var htmlString = '<table border="1">'; 
 
    for (var i = 0; i < origins.length; i++) { 
 
     var results = response.rows[i].elements; 
 
     addMarker(origins[i], false); 
 
     for (var j = 0; j < results.length; j++) { 
 
     addMarker(destinations[j], true); 
 
     htmlString += '<tr><td>' + stringArray[j] + '</td><td>' + results[j].distance.text + '</td></tr>'; 
 
     outputDiv.innerHTML += '<tr><td>' + stringArray[j] + '</td><td>' + results[j].distance.text + '</td></tr>'; 
 
     } 
 
    } 
 
    htmlString += '</table>'; 
 
    // outputDiv.innerHTML += '</table>'; 
 
    outputDiv.innerHTML = htmlString; 
 
    // alert(htmlString); 
 
    } 
 
} 
 

 
function addMarker(location, isDestination) { 
 
    var icon; 
 
    if (isDestination) { 
 
    icon = destinationIcon; 
 
    } else { 
 
    icon = originIcon; 
 
    } 
 
    geocoder.geocode({ 
 
    'address': location 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     bounds.extend(results[0].geometry.location); 
 
     map.fitBounds(bounds); 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: results[0].geometry.location, 
 
     icon: icon 
 
     }); 
 
     markersArray.push(marker); 
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
} 
 

 
function deleteOverlays() { 
 
    if (markersArray) { 
 
    for (i in markersArray) { 
 
     markersArray[i].setMap(null); 
 
    } 
 
    markersArray.length = 0; 
 
    } 
 
}

body { 
 
    margin: 20px; 
 
    font-family: courier, sans-serif; 
 
    font-size: 12px; 
 
} 
 
#map { 
 
    height: 480px; 
 
    width: 640px; 
 
    border: solid thin #333; 
 
    margin-top: 20px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="outputDiv"></div> 
 
<div id="map"></div>