Google map вычислить разное расстояние ontextbox change & button click

Это очень странная проблема, с которой я столкнулся. На моей странице html есть 2 текстовых поля, которые связаны с картой google. Проблема заключается в том, что кнопка «Вкл» нажимает кнопку «высчитывает» идеальный результат, но если я пытаюсь выполнить такую же функцию при изменении текстового поля, это показывает неправильный результат. Вот ссылка моей страницы. Не удается ли получить результат при изменении второго текстового поля?Google map вычислить разное расстояние ontextbox change & button click

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     body 
     { 
      font-family: Arial; 
      font-size: 10pt; 
     } 
    </style> 
</head> 
<body onload="GetRoute();"> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
    <script type="text/javascript"> 
     var source, destination; 
     var directionsDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     google.maps.event.addDomListener(window, 'load', function() { 
      new google.maps.places.SearchBox(document.getElementById('txtSource')); 
      new google.maps.places.SearchBox(document.getElementById('txtDestination')); 
      directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); 
     }); 

     function GetRoute() { 
      var mumbai = new google.maps.LatLng(18.9750, 72.8258); 
      var mapOptions = { 
       zoom: 7, 
       center: mumbai 
      }; 
      map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); 
      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById('dvPanel')); 

      //*********DIRECTIONS AND ROUTE**********************// 
      source = document.getElementById("txtSource").value; 
      destination = document.getElementById("txtDestination").value; 

      var request = { 
       origin: source, 
       destination: destination, 
       travelMode: google.maps.TravelMode.DRIVING 
      }; 
      directionsService.route(request, function (response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(response); 
       } 
      }); 

      //*********DISTANCE AND DURATION**********************// 
      var service = new google.maps.DistanceMatrixService(); 
      service.getDistanceMatrix({ 
       origins: [source], 
       destinations: [destination], 
       travelMode: google.maps.TravelMode.DRIVING, 
       unitSystem: google.maps.UnitSystem.METRIC, 
       avoidHighways: false, 
       avoidTolls: false 
      }, function (response, status) { 
       if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { 
        var distance = response.rows[0].elements[0].distance.text; 
        var duration = response.rows[0].elements[0].duration.text; 
        var dvDistance = document.getElementById("dvDistance"); 
        dvDistance.innerHTML = ""; 
        dvDistance.innerHTML += "Distance: " + distance + "<br />"; 
        dvDistance.innerHTML += "Duration:" + duration; 

       } else { 
        alert("Unable to find the distance via road."); 
       } 
      }); 
     } 
    </script> 
    <table border="0" cellpadding="0" cellspacing="3"> 
     <tr> 
      <td colspan="2"> 
       Source: 
       <input type="text" id="txtSource" style="width: 200px" /> 
       &nbsp; Destination: 
       <input type="text" id="txtDestination" onchange="GetRoute(this);" style="width: 200px" /> 
       <br /> 
       <input type="button" value="Get Route" onclick="GetRoute()" /> 
       <hr /> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <div id="dvDistance"> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div id="dvMap" style="width: 500px; height: 500px"> 
       </div> 
      </td> 
      <td> 
       <div id="dvPanel" style="width: 500px; height: 500px"> 
       </div> 
      </td> 
     </tr> 
    </table> 
    <br /> 
</body> 
</html>

источник

2015-12-05 Anonymous

Потому что вы пытаетесь запустить сценарий в то же самое время, когда значение текстового поля получает изменено он не получает точное измерение расстояния. Просто установите таймер, который задерживает вашу функцию для работы в течение 2 секунд. Внесите изменения в эту строку.

<input type="text" id="txtDestination" onchange="setTimeout(function() {GetRoute()}, 2000);" style="width: 200px" />

Это задержит вашу функцию 2seconds & затем бежит.

Надеюсь, это поможет вам.

источник

2015-12-05 07:50:51

Спасибо, чувак. Это сработало для меня ... –

Google map вычислить разное расстояние ontextbox change & button click

ответ

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