Question

我试图用gogle autocomplete填满2个投入,然后用直线图示方向。

我设法使用汽车,但当我点击提交纽州时,没有发生任何事情。

使用该法典的Im:

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);

From :
To:

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>

友情链接