首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将旋转信息与google距离矩阵api和javascript结合使用

将旋转信息与google距离矩阵api和javascript结合使用
EN

Stack Overflow用户
提问于 2019-03-15 06:49:58
回答 1查看 16关注 0票数 0

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

EN

回答 1

Stack Overflow用户

发布于 2019-03-15 08:39:46

在调用函数时破坏结构。上传的Google库指定了您不需要的函数调用"callback = initMap“。此外,为了让一切正常工作,您需要从谷歌获取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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55173152

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档