использовать вращающуюся информацию с Google API матрицы расстояния API с JavaScript - PullRequest
Новая
       16

использовать вращающуюся информацию с Google API матрицы расстояния API с JavaScript

0 голосов
/ 15 марта 2019

Я запускаю цикл с приложением, но я хочу назначить данные в строке отдельным элементам HTML. Буду признателен, если вы покажете мне, что не так с кодом.

Я хочу сделать из нескольких разных точек в зависимости от расстояния и времени, чтобы получить информацию через javascript и показать элементы на html 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>distancematrixjs</title>
</head>

<body>
    
    <div id="sonuc">
    <p id="mesafe1">Mesafe 1:</p>
    <p id="sure1">Süre 1:</p>
    <p id="StatusDurum">Durum:</p>
    
    <input type="button" value="hesapla" onClick="getDistance()"/>
    
    </div>
    
    <script type="text/javascript">
        
        var origin1 = {lat: 41.67415, lng: 26.56253};
        
        var destinationA = 'İstanbul, Türkiye';
        
                    
         
        
        
    function getDistance()
    {
       
        var service=new google.maps.DistanceMatrixService;
        service.getDistanceMatrix({
            origins:[origin1],
            destinations:[destinationA],
            travelMode:'DRIVING',
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
 },function(response,status){
        if(status !=='OK'){
            StatusDurum.innerHTML+='Hata'+status;
        }else{
            StatusDurum.innerHTML+=response;
            
            
        
            
         var outputMesafe1=document.getElementById('mesafe1');
         var outputSure1=document.getElementById('sure1'); 
            
           outputMesafe1.innerHTML+=response.rows[0].elements[0].distance.text;                 
           outputSure1.innerHTML+=response.rows[0].elements[0].duration.text; 
                  
                  
          
            
        }
    }
        
        
        
        
    
    
    
    </script>
    
    
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR-APİ-KEY&callback=initMap">
    </script>
    
</body>
</html>

1 Ответ

0 голосов
/ 15 марта 2019

Разрушение структуры при вызове функции.В загружаемой библиотеке Google указан вызов функции "callback = initMap", который вам не нужен.Кроме того, чтобы все работало, вам нужно получить API-ключ KEY от Google и вставить его в библиотеку для загрузки вместо YOUR_API_KEY 

<script>
var origin1 = {lat: 41.67415, lng: 26.56253};
var destinationA = 'İstanbul, Türkiye';
function getDistance() {
    var service=new google.maps.DistanceMatrixService;
    service.getDistanceMatrix({
            origins:[origin1],
            destinations:[destinationA],
            travelMode:'DRIVING',
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        },function(response,status){
            if(status !=='OK'){
                StatusDurum.innerHTML+='Hata'+status;
            }else{
                StatusDurum.innerHTML+=response;
                var outputMesafe1=document.getElementById('mesafe1');
                var outputSure1=document.getElementById('sure1'); 
               outputMesafe1.innerHTML+=response.rows[0].elements[0].distance.text;                 
               outputSure1.innerHTML+=response.rows[0].elements[0].duration.text;        
            }
        })
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
...