带有自动完成功能的 Google 路线答案

【问题标题】：Google Directions with autocomplete带有自动完成功能的 Google 路线
【发布时间】：2012-05-10 18:25:32
【问题描述】：

我正在尝试使用 google 自动完成填充 2 个输入，然后获取 google 地图方向 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);

发件人：
致：

【问题讨论】：

标签： autocomplete directions

【解决方案1】：

<!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>

【讨论】：

您应该回答解决的问题并解释您提供的代码如何帮助解决给定的问题。也许将其拆分为更小的代码快照。