爲什麼JavaScript代碼在我打開網站時無法正常工作

-1

我是一名JavaScript初學者，但我正嘗試在谷歌地圖API和Google Maps JavaScript API的Google地圖上放置路線。如果我啓動網站，它不會顯示任何路線，但是如果我在Google Chrome控制檯執行這些命令，它會顯示路線。 picture from the Google Chrome Console 爲什麼JavaScript代碼在我打開網站時無法正常工作

<html> 
<body> 
<div id="map" style="width:100%;height:500px;"></div> 
      <script> 
       function requestRoute(origin1, origin2, destination1, destination2, waypoints) { 


          var directionsService = new google.maps.DirectionsService(); 
          var myoutput = []; 

          var request = { 
            origin: new google.maps.LatLng(origin1, origin2), 
            destination: new google.maps.LatLng(destination1, destination2), 
            waypoints: waypoints, 
            travelMode: google.maps.TravelMode.DRIVING 
           }; 

           directionsService.route(request, function (result, status) 
           { if (status == google.maps.DirectionsStatus.OK) 
             { 
             for (var x = 0; x < result.routes[0].legs.length; x++){ 
             var myRoute = result.routes[0].legs[x]; 

             for (var i = 0; i < myRoute.steps.length; i++) { 
               for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) { 
                myoutput.push(myRoute.steps[i].lat_lngs[j]); 
               } 
              } 
             } 

            } else{ 
            alert(status) 
            } 
           }); 

          return myoutput;       




         }; 

        function processWaypoints(waypoints) { 
          var myarray = waypoints; 

          var myoutput = [] 

          for (var x = 0; x < waypoints.length; x++){ 
           myoutput.push({location: new google.maps.LatLng(myarray[x][0], myarray[x][1]), stopover: false}); 
          }; 

          return myoutput; 
        }; 



       function initMap() { 

        var map = new google.maps.Map(document.getElementById('map'), { 
         zoom: 2, 
         center: {lat: 12, lng: 15}, 
         scrollwheel: false 
        }); 




       var waypoints1 = processWaypoints([[-34.6036844, -58.3815591]]); 
       var points1 = requestRoute(-33.4488897, -70.6692655, -24.7821269, -65.4231976, waypoints1); 

       var routLine1 = new google.maps.Polyline(
           { 
            path: points1, 
            strokeColor: "#FFC107", 
            strokeOpacity:0.8, 
            strokeWeight:4 
           } 
          ); 

       routLine1.setMap(map); 




       } 
      </script> 

      <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key='MyGoogleMapsAPIKey'&callback=initMap"> 
      </script> 
</body> 
</html>

大家有一個想法，什麼是錯在我的代碼？

來源

2017-06-12 Florian Kittelmann

你是不是叫你的任何功能 – Lixus

@Lixus'回調= initMap'他們是在谷歌地圖腳本標籤:) – George

'但是如果我在谷歌Chrome控制檯執行命令，它讓我看到route.'但你不執行你所示的代碼中的命令 – Denny

您遇到的問題是directionsService調用是異步的。 myoutput從requestRoute返回，它仍然是一個空數組。我重組：

<html> 
<body> 
<div id="map" style="width:100%;height:500px;"></div> 
     <script> 
      var map; 
      function requestRoute(origin1, origin2, destination1, destination2, waypoints) { 


         var directionsService = new google.maps.DirectionsService(); 
         var myoutput = []; 

         var request = { 
           origin: new google.maps.LatLng(origin1, origin2), 
           destination: new google.maps.LatLng(destination1, destination2), 
           waypoints: waypoints, 
           travelMode: google.maps.TravelMode.DRIVING 
          }; 

          directionsService.route(request, function (result, status) 
          { if (status == google.maps.DirectionsStatus.OK) 
            { 
            for (var x = 0; x < result.routes[0].legs.length; x++){ 
            var myRoute = result.routes[0].legs[x]; 

            for (var i = 0; i < myRoute.steps.length; i++) { 
              for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) { 
               myoutput.push(myRoute.steps[i].lat_lngs[j]); 
              } 
             } 
            } 

            plotRoute(myoutput); 

           } else{ 
           alert(status) 
           } 
          }); 

         // return myoutput;       




        }; 

       function processWaypoints(waypoints) { 
         var myarray = waypoints; 

         var myoutput = [] 

         for (var x = 0; x < waypoints.length; x++){ 
          myoutput.push({location: new google.maps.LatLng(myarray[x][0], myarray[x][1]), stopover: false}); 
         }; 

         return myoutput; 
       }; 



      function initMap() { 

       map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 2, 
        center: {lat: 12, lng: 15}, 
        scrollwheel: false 
       }); 




      var waypoints1 = processWaypoints([[-34.6036844, -58.3815591]]); 
      requestRoute(-33.4488897, -70.6692655, -24.7821269, -65.4231976, waypoints1); 




      } 
      function plotRoute(points1){ 


       var routLine1 = new google.maps.Polyline(
           { 
            path: points1, 
            strokeColor: "#FFC107", 
            strokeOpacity:0.8, 
            strokeWeight:4 
           } 
          ); 

       routLine1.setMap(map); 
      } 
     </script> 

     <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJLxeMko3jmj7ImPv96sVt-eyP7FtixQc&callback=initMap"> 
     </script>

它不漂亮，但你的想法。

來源

2017-06-12 15:01:54 dgeare

感謝您的幫助，它解決了我的問題。 –

爲什麼JavaScript代碼在我打開網站時無法正常工作

回答

相關問題