Question

我正在尝试使用Google自动填充功能填充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);

来自：致：

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

带有自动填充功能的Google方向

1 个答案: