谷歌路線與自動完成

我想填充2輸入與谷歌自動完成，然後獲取谷歌地圖方向ASD路線。谷歌路線與自動完成

我設法使用自動完成，但是當我點擊提交按鈕時什麼也沒有發生。

我使用這個代碼：

function initialize() { 
    map = new GMap2(document.getElementById("map_canvas")); 
    map.setCenter(new GLatLng(39.57182223734374, -7.811279296875), 15); 
    gdir = new GDirections(map, document.getElementById("directions")); 

    var input = document.getElementById('tb_fromPoint'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 

    var input2 = document.getElementById('tb_endPoint'); 
    var autocomplete2 = new google.maps.places.Autocomplete(input2); 

    setDirections(); 

} 

function setDirections() { 
    var fromAddress = document.getElementById('tb_fromPoint'); 
    var toAddress = document.getElementById('tb_endPoint'); 
    gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": "pt_PT" });

}

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

來源：
要：

來源

2012-05-10 Tusto Avpt

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Directions service</title> 
    <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&amp;libraries=places" type="text/javascript"></script> 

    <script> 
     var directionsDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 

    function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(13.0524139, 80.25082459999999); 
     var mapOptions = { 
     zoom:7, 
     center: chicago 
     } 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    } 

     function calcRoute() { 
     var start = document.getElementById('city1').value; 
     var end = document.getElementById('city2').value; 


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

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

    </script> 
    </head> 
    <body> 
     <div id="map-canvas" style="width: 650px; height: 350px;"></div> 



<script type="text/javascript"> 
     function initialize1() { 
     var options = { 
      types: ['(cities)'], 
      componentRestrictions: {country: "in"} 
     };  

     var input1 = document.getElementById('searchTextField1'); 
     var autocomplete = new google.maps.places.Autocomplete(input1,options); 
      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place1 = autocomplete.getPlace(); 
      document.getElementById('city1').value = place1.name; 
      document.getElementById('cityLat1').value = place1.geometry.location.lat(); 
      document.getElementById('cityLng1').value = place1.geometry.location.lng(); 
      document.getElementById('cityy').value = place1.city_name; 
      initialize(); 
      calcRoute() 
     }); 
    } 

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


     function initialize2() { 
     var options = { 
     //types: ['(cities)'], 
     componentRestrictions: {country: "in"} 
     }; 

     var input2 = document.getElementById('searchTextField2'); 
     var autocomplete = new google.maps.places.Autocomplete(input2, options); 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place2 = autocomplete.getPlace(); 
      document.getElementById('city2').value = place2.name; 
      document.getElementById('cityLat2').value = place2.geometry.location.lat(); 
      document.getElementById('cityLng2').value = place2.geometry.location.lng(); 
      initialize(); 
      calcRoute() 

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


</script> 

<input id="searchTextField1" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> <br /> 
<input type="text" id="city1" name="city1" /> <br /> 
<input type="text" id="cityLat1" name="cityLat1" /> <br /> 
<input type="text" id="cityLng1" name="cityLng1" /> <br /> 

<input id="searchTextField2" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> <br /> 
<input type="text" id="city2" name="city2" /> <br /> 
<input type="text" id="cityLat2" name="cityLat2" /> <br /> 
<input type="text" id="cityLng2" name="cityLng2" /> <br /> 


    </body> 
</html>

來源

2014-07-31 07:16:54

您應該回答所提出的問題並解釋您提供的代碼可能如何幫助解決給定的問題。也許把它分成更小的代碼快照。 –

谷歌路線與自動完成

回答

相關問題