2016-01-06 2 views
1

Я разработал следующий код, чтобы получить расстояние от данных двух городов через 2 текстовых поля, и я хочу отправить их на карту расстояния api на карте google, используя следующий URl. Я отправляю эти города и получаю выходной файл JSON. но моя проблема в том, как я могу получить конкретный атрибут (расстояние) от этого файла JSON и отобразить его на другом текстовом поле.получить расстояние, используя карты google maps distance api Выход JSON

function m() { 

      var x = document.getElementById("autocomplete").value; 
      var y = document.getElementById("autocomplete1").value; 

      var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=" + x + "&destinations=" + y + "&key=AIzaSyD5KX6VRon6yQ0vu4s6GSnAVzazRWg8wrc"; 

window.location=url; // this will go to the above url and display the JSON output file on the browser. I dont want that to be shown. just some processing and should display only the distance form that file on a textfield! 

} 

выходной файл в формате JSON http://pastebin.ca/3318529

Пожалуйста, помогите решить эту проблему. Я новичок в JSON. Поэтому, если у вас есть другие идеи, скажите мне. Большое спасибо :)

ответ

1

Если вы используете Javascript в браузере, вам нужно использовать Google Maps Api.

Проверить этот пример:

<script src="https://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
function init() { 
    var service = new google.maps.DistanceMatrixService; 
    service.getDistanceMatrix({ 
    origins: ['Los Angeles'], 
    destinations: ['New York'], 
    travelMode: google.maps.TravelMode.DRIVING, 
    unitSystem: google.maps.UnitSystem.METRIC, 
    avoidHighways: false, 
    avoidTolls: false 
    }, function(response, status) { 
    if (status !== google.maps.DistanceMatrixStatus.OK) { 
     alert('Error was: ' + status); 
    } else { 
     alert(response.originAddresses[0] + ' --> ' + response.destinationAddresses[0] + ' ==> ' + response.rows[0].elements[0].distance.text); 
    } 
    }); 
} 
</script> 
<body onload="init()"> 
</body> 

Запуск примера https://jsfiddle.net/3b03m5mt/

+0

спасибо большое. это сработало :))) – sheslv

Смежные вопросы