使用谷歌地圖API計算距離並將其設置在表格中

我想要使用地理定位和谷歌地圖路線計算距離，我已經計算了距離，但是我需要顯示距離。我試圖用document.write來做，但它不起作用，有人能幫助我嗎？謝謝！使用谷歌地圖API計算距離並將其設置在表格中

對不起，我的英語，它不是我的主動語言。

<script type="text/javascript"> 
    var map; 
    var myPos; 
    var marker; 
    var tDist = 0; 
    var directionsRenderer; 
    var directionsService = new google.maps.DirectionsService(); 

    if (navigator && navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(geoOK, geoKO); 
    } else { 
     geoMaxmind(); 
    } 


    function geoOK(position) { 
     showMap(position.coords.latitude, position.coords.longitude); 
    } 


    function geoMaxmind() { 
     showMap(geoip_latitude(), geoip_longitude()); 
    } 

    function geoKO(err) { 
     if (err.code == 1) { 
      error('El usuario ha denegado el permiso para obtener información de ubicación.'); 
     } else if (err.code == 2) { 
      error('Tu ubicación no se puede determinar.'); 
     } else if (err.code == 3) { 
      error('TimeOut.') 
     } else { 
      error('Oops!, algo malo pasó.'); 
     } 
    } 

    function showMap(lat, longi) { 

    myPos = new google.maps.LatLng(lat,longi); 

    var myOptions = { 
     zoom: 16, 
     center: myPos, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    } 

    map = new google.maps.Map(document.getElementById("mapa"), myOptions); 

    marker = new google.maps.Marker({ 
     position: myPos, 
     title:"your position", 
     draggable:false, 
     animation: google.maps.Animation.DROP 
    }); 

    marker.setMap(map); 

    directionsRenderer = new google.maps.DirectionsRenderer(); 
    directionsRenderer.setMap(map); 
     travelToAddress(); 
    } 

    function travelToAddress(){ 

     //Obtenemos la direccion 
     var origen=marker.getPosition(); 

     destino=document.forms[0].address.value; 
     directionsService = new google.maps.DirectionsService(); 
     // opciones de busqueda 
     var request = { 
     origin: origen, 
     destination: destino, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request,getRuta); 
    } 

    function getRuta(result, status){ 

     if (status == google.maps.DirectionsStatus.OK) { 

     var nlegs = result.routes[0].legs.length; 
      for (var i = 0; i < nlegs; i++) { 
      tDist += result.routes[0].legs[i].distance.value; 
      } 
      directionsRenderer.setDirections(result); 
      alert("Distance:"+tDist); 
     } else { 
      error("Ha ocurrido un error debido a : " + status); 
     } 
    } 


    function error(msg) { 
     alert(msg); 
    } 
</script>undefined</head>undefined<body> 
<div class="contenedor"> 
    <header></header> 
    <main> 
     <div class="tabRes"> 
      <table border=2 class='table table-condensed table-striped table-bordered table-hover table-responsive' cellspacing="0"> 
       <thead> 
        <tr> 
         <th> 
          <b>Name</b> 
         </th> 
         <th> 
          <b>Distance</b> 
         </th> 
         <th> 
          <b>something</b> 
         </th> 
         <th> 
          <b>Something else</b> 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <?php 
        $conexion = new buscar(__HOST__,__USUARIODB__,__PASSDB__,__DATABASE__); 
        $datos=$conexion->showD($_GET['buscar']); 
        if ($datos != false) { 
        while($fila=mysqli_fetch_assoc($datos)){ 
        ?> 
        <form> 
         <input id="destino" type="text" name="address" value=" 
          <?php echo $fila['Address']; ?>" /> 
         </form> 
         <tr> 
          <td> 
           <?php echo $fila['Name']; ?> 
          </td> 
          <td> 
           <script type="text/javascript">document.write(tDist);</script> 
          </td> 
          <?php echo" 
          <td> 
           <a href='some.php?something=".$fila['ID']."&check=".$_GET['check']."'> 
            <button class='btn btn-primary'>to Something</button> 
           </a> 
          </td>"; ?> 
          <?php echo " 
          <td> 
           <a href='where.php?something=".$fila['ID']."&check=".$_GET['check']."'> 
            <button id='check' class='btn btn-warning'>where to go</button> 
           </a> 
          </td>"; ?> 
         </tr> 
         <?php 
        } 
       } else { 
         echo "a message"; 
        } 
       ?> 
        </tbody> 
       </table> 
      </div> 
      <!-- fin de tabRes --> 
     </main> 
    </body>

來源

2016-05-13 kev

的jsfiddle請... –

你想在哪裏準確顯示信息？ –

@ParagBhayani在表單之後，有一個和一個

相關問題

使用谷歌地圖API計算距離並將其設置在表格中​​

相關問題

使用谷歌地圖API計算距離並將其設置在表格中