Fatal编程技术网

Autocomplete 谷歌方向与自动完成

autocomplete

Autocomplete 谷歌方向与自动完成,autocomplete,directions,Autocomplete,Directions,我试图用google autocomplete填充2个输入，然后获得google地图方向asd路线 我设法使用自动完成，但当我点击提交按钮时，什么也没有发生 我正在使用以下代码： function initialize() { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(39.57182223734374, -7.811279296875), 15);

我试图用google autocomplete填充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" });
}

发件人：
致：


方向服务
var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（13.0524139,80.2508245999999）；
变量映射选项={
缩放：7，
中心：芝加哥
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）{
var start=document.getElementById（'city1'）。值；
var end=document.getElementById（'city2'）。值；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
函数初始化1（）{
变量选项={
类型：['（城市）]，
组件限制：{国家：“}
};    
var input1=document.getElementById（'searchTextField1'）；
var autocomplete=new google.maps.places.autocomplete（输入1，选项）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place1=autocomplete.getPlace（）；
document.getElementById（'city1'）。value=place1.name；
document.getElementById（'Cityla1'）。value=place1.geometry.location.lat（）；
document.getElementById（'cityLng1'）。value=place1.geometry.location.lng（）；
document.getElementById（'cityy'）。value=place1.city_name；
初始化（）；
calcRoute（）
});
}
google.maps.event.addDomListener（窗口“加载”，初始化1）；
函数初始化2（）{
变量选项={
//类型：['（城市）]，
组件限制：{国家：“}
};
var input2=document.getElementById（'searchTextField2'）；
var autocomplete=new google.maps.places.autocomplete（输入2，选项）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place2=autocomplete.getPlace（）；
document.getElementById（'city2'）。value=place2.name；
document.getElementById（'Cityla2'）。value=place2.geometry.location.lat（）；
document.getElementById（'cityLng2'）。value=place2.geometry.location.lng（）；
初始化（）；
calcRoute（）
});
}
google.maps.event.addDomListener（窗口'load'，初始化2）；
您应该回答所提出的问题，并解释您提供的代码如何帮助解决给定的问题。也许可以将其拆分为更小的代码快照。 
google.maps.event.addDomListener(window, 'load', initialize);

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