时间戳

首页 > 解决方案 > 使用带有 javascript 的 google 距离矩阵 api 的旋转信息

javascript - 使用带有 javascript 的 google 距离矩阵 api 的旋转信息

问题描述

我正在使用应用程序运行循环，但我想将行中的数据分配给单个 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>

标签： javascriptmatrixservicedistance

解决方案

调用函数时破坏结构。谷歌库上传指定的函数调用“callback = initMap”你不需要它。此外，为了让一切正常工作，您需要从 Google 获取 API KEY 并将其嵌入到库上传中，而不是 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>

推荐阅读