자동 완성 상자가있는 google지도의 운전 방향

Question

운전 방향을 보여주는 자동 완성 입력란이있는 Google지도가 있습니다. 문제는 방향 서비스가 자동 완성 된 변수 대신 입력 변수를 사용하기 때문에 오류가 발생한다는 것입니다. 이 문제를 어떻게 해결할 수 있습니까?

데모 : http://touristification.com/reisadvies/routekaart.html

<div id="map"></div> 
<script> 
var placeSearch, autocomplete, autocomplete2; 



     google.maps.event.addDomListener(window, 'load', initMap); 

    function initMap() { 

    var input1 = document.getElementById('locationTextField'); 
    var start = new google.maps.places.Autocomplete(input1); 


    var input2 = document.getElementById('locationTextField2'); 
    var end = new google.maps.places.Autocomplete(input2);  

    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: {lat: 52.34, lng: 4.87} 
    }); 
    directionsDisplay.setMap(map); 
    var geocoder = new google.maps.Geocoder; 
    var onChangeHandler = function() { 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 

    }; 
    document.getElementById('locationTextField').addEventListener('change', onChangeHandler); 
    document.getElementById('locationTextField2').addEventListener('change', onChangeHandler); 
    } 


    function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
    directionsService.route({ 
     origin: document.getElementById('locationTextField').value, 
     destination: document.getElementById('locationTextField2').value, 
     travelMode: 'DRIVING' 
    }, function(response, status) { 
     if (status === 'OK') { 
     directionsDisplay.setDirections(response); 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 




    } 
</script> 

Answer 1

'변화'가 있기 때문에 당신은 대신에 '변화'이벤트의 'place_changed'이벤트를 사용한다

입력이 변경 될 때마다 실행되며 사용자가 자동 ​​완성에서 장소를 선택하지 않을 때 실행됩니다. 장소 그 자체를 얻는 것을 잊지 마라.

google.maps.event.addListener(start, 'place_changed',function(){ 
    var from = start.getPlace(); 
    // the rest of the code 
}); 

그런 다음 calculateAndDisplayRoute 기능에 :

function calculateAndDisplayRoute(directionsService, directionsDisplay, from, to) { 
    directionsService.route({ 
    origin: from.geometry.location, 
    destination: to.geometry.location, 
    travelMode: 'DRIVING' 
    }, function(response, status) { 
    if (status === 'OK') { 
     directionsDisplay.setDirections(response); 
    } else { 
     window.alert('Directions request failed due to ' + status); 
    } 
    }); 
} 

Answer 2

나는 autocomple .getPlace().geometry.location뿐만 아니라 잘 작동 다른 이벤트 핸들러 google.maps.event.addListener(start, 'place_changed', onChangeHandler1);을 사용했다. 당신이에 Google지도 API를 여러 번 포함했다 "코드 스타일이 매우 좋지 않아, 우선 것을 수정,

http://codepen.io/bora-89/pen/bwJoNY

(function() { 
 
       var placeSearch, autocomplete, autocomplete2; 
 
     
 
     
 
       google.maps.event.addDomListener(window, 'load', initMap); 
 
     
 
       function initMap() { 
 
        var input1 = document.getElementById('locationTextField'); 
 
        var start = new google.maps.places.Autocomplete(input1); 
 
     
 
     
 
        var input2 = document.getElementById('locationTextField2'); 
 
        var end = new google.maps.places.Autocomplete(input2); 
 
     
 
        var directionsService = new google.maps.DirectionsService; 
 
        var directionsDisplay = new google.maps.DirectionsRenderer; 
 
        var map = new google.maps.Map(document.getElementById('map'), { 
 
         zoom: 7, 
 
         center: {lat: 52.34, lng: 4.87} 
 
        }); 
 
        directionsDisplay.setMap(map); 
 
        var geocoder = new google.maps.Geocoder; 
 
        var startLoc, endLoc; 
 
        var onChangeHandler1 = function() { 
 
         startLoc = this.getPlace().geometry.location; 
 
         if (startLoc && endLoc) { 
 
          calculateAndDisplayRoute(directionsService, 
 
            directionsDisplay, 
 
            startLoc, 
 
            endLoc 
 
          ); 
 
         } 
 
        }; 
 
        var onChangeHandler2 = function() { 
 
         endLoc = this.getPlace().geometry.location; 
 
         if (endLoc && startLoc) { 
 
          calculateAndDisplayRoute(directionsService, 
 
            directionsDisplay, 
 
            startLoc, 
 
            endLoc 
 
          ); 
 
         } 
 
        }; 
 
        google.maps.event.addListener(start, 'place_changed', onChangeHandler1); 
 
        google.maps.event.addListener(end, 'place_changed', onChangeHandler2); 
 
     
 
       } 
 
     
 
     
 
       function calculateAndDisplayRoute(directionsService, directionsDisplay, startLoc, endLoc) { 
 
        console.log(startLoc); 
 
        console.log(endLoc); 
 
        directionsService.route({ 
 
         origin: startLoc, 
 
         destination: endLoc, 
 
         travelMode: 'DRIVING' 
 
        }, function (response, status) { 
 
         if (status === 'OK') { 
 
          directionsDisplay.setDirections(response); 
 
         } else { 
 
          window.alert('Directions request failed due to ' + status); 
 
         } 
 
        }); 
 
     
 
     
 
       } 
 
      })();