为什么'；当我打开网站时，javascript代码不起作用吗_Javascript_Google Maps Api 3_Google Directions Api

为什么'；当我打开网站时，javascript代码不起作用吗

javascript google-maps-api-3

为什么'；当我打开网站时，javascript代码不起作用吗,javascript,google-maps-api-3,google-directions-api,Javascript,Google Maps Api 3,Google Directions Api,我是一个JavaScript初学者，但我正在尝试使用GoogleMapsDirections API和GoogleMapsJavaScript API在GoogleMaps上设置一条路线。如果我启动网站，它不会显示任何路线，但如果我在谷歌浏览器控制台上执行命令，它会显示路线功能请求路由（起始1、起始2、目的1、目的2、航路点）{ var directionsService=new google.maps.directionsService（）； var myoutput=[]； var请求=

我是一个JavaScript初学者，但我正在尝试使用GoogleMapsDirections API和GoogleMapsJavaScript API在GoogleMaps上设置一条路线。如果我启动网站，它不会显示任何路线，但如果我在谷歌浏览器控制台上执行命令，它会显示路线


功能请求路由（起始1、起始2、目的1、目的2、航路点）{
var directionsService=new google.maps.directionsService（）；
var myoutput=[]；
var请求={
来源：新google.maps.LatLng（origin1，origin2），
目的地：新的google.maps.LatLng（目的地1，目的地2），
航路点：航路点，
travelMode:google.maps.travelMode.DRIVING
};
路由（请求、功能（结果、状态）
{if（status==google.maps.directionstatus.OK）
{
对于（var x=0；x


有人知道我的代码出了什么问题吗？
您遇到的问题是DirectionService调用是异步的。当从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>


var映射；
功能请求路由（起始1、起始2、目的1、目的2、航路点）{
var directionsService=new google.maps.directionsService（）；
var myoutput=[]；
var请求={
来源：新google.maps.LatLng（origin1，origin2），
目的地：新的google.maps.LatLng（目的地1，目的地2），
航路点：航路点，
travelMode:google.maps.travelMode.DRIVING
};
路由（请求、功能（结果、状态）
{if（status==google.maps.directionstatus.OK）
{
对于（var x=0；x<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>