为什么 javascript 代码在我打开网站时不起作用

Question

我是 JavaScript 初学者，但我正在尝试在 google 地图上添加路线 Google 地图方向 API 和 Google 地图 Javascript API。如果我启动网站，它不会显示任何路线，但如果我在 Google Chrome 控制台执行命令，它会显示路线。 picture from the Google Chrome Console

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

有人知道我的代码有什么问题吗？

Answer 1

您遇到的问题是 directionsService 调用是异步的。在从 requestRoute 返回 myoutput 时，它仍然是一个空数组。我重组了：

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

它不漂亮，但你明白了。

为什么 javascript 代码在我打开网站时不起作用

Why doesn't the javascript code work when I open the website

javascript

google-maps-api-3

google-directions-api