Ошибка Google Directions: запрос не определен

Question

Я использую указания для Google Maps V3 API.Однако я получаю ошибку javscript при запуске: Uncaught ReferenceError: запрос не определен

Это мой код JS:

 <script type="text/javascript">

    var directionDisplay; //NEW CODE

    var directionsService = new google.maps.DirectionsService(); //NEW CODE

    function initialize() {

    directionsDisplay = new google.maps.DirectionsRenderer(); //NEW CODE

    var latlng = new google.maps.LatLng(1.288693,103.846733);

    var options = {  

        zoom: 16,  

        center: latlng,  

        mapTypeId: google.maps.MapTypeId.ROADMAP,

        scrollwheel: true

    }; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), options);  

        directionsDisplay.setMap(map);

        marker1 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map

        }); 

        marker2 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map

        }); 

        google.maps.event.addListener(marker1, "mouseover", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");

        });

        google.maps.event.addListener(marker1, "mouseout", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");

        });

        google.maps.event.addListener(marker1, "click", function(event) {

            window.location = "http://localhost/yupsg/places/display/111";

        });

        google.maps.event.addListener(marker2, "mouseover", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");

        });

        google.maps.event.addListener(marker2, "mouseout", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");

        });

        google.maps.event.addListener(marker2, "click", function(event) {

            window.location = "http://localhost/yupsg/places/display/111";

        });

        var LatLngList = [

        new google.maps.LatLng(1.288693,103.846733),

        new google.maps.LatLng(1.288693,103.846733)

        ];

    }



        function changeMarkerOnmouseover(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");

        }

        function changeMarkerOnmouseout(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");

        }



        function changeMarkerOnmouseover(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");

        }

        function changeMarkerOnmouseout(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");

        }

                        //NEW CODE FOR NEW FUNCTION
        function calcRoute() {

            var start = "35 Oxford Street, Cambridge, MA 02138";

            var end = "24 Oxford Street, Cambridge, MA 02138";

            var request = {

                origin:start,

                destination:end,

                travelMode: google.maps.TravelMode.DRIVING

            };
        }

        directionsService.route(request, function(result, status) {

            if (status == google.maps.DirectionsStatus.OK) {

                directionsDisplay.setDirections(result);

            }

          });



</script></head>

Answer 1

Вы определяете request внутри области действия calcRoute(), но затем сразу пытаетесь использовать его снаружи вне calcRoute()Определите его в той же области, где вы будете его использовать.

Похоже, что там тоже может быть несколько других ошибок.Вот конечный результат моих попыток внести минимальные изменения, чтобы заставить ваш код работать.Надеюсь, это поможет!

<html>
<head>
<title>Maps Test</title>
<script type="application/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head>
<body>
<h1>Map</h1>
<div id="map_canvas" style="height:100%; width:100%;"></div>
<script type="text/javascript">

    var directionsDisplay; //NEW CODE

    var directionsService = new google.maps.DirectionsService(); //NEW CODE

    directionsDisplay = new google.maps.DirectionsRenderer(); //NEW CODE

    var latlng = new google.maps.LatLng(1.288693,103.846733);

    var options = {  

        zoom: 16,  

        center: latlng,  

        mapTypeId: google.maps.MapTypeId.ROADMAP,

        scrollwheel: true
    }; 


    var map = new google.maps.Map(document.getElementById('map_canvas'), options);  

        directionsDisplay.setMap(map);

        marker1 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map

        }); 

        marker2 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map

        }); 

        google.maps.event.addListener(marker1, "mouseover", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");

        });

        google.maps.event.addListener(marker1, "mouseout", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");

        });

        google.maps.event.addListener(marker1, "click", function(event) {

            window.location = "http://localhost/yupsg/places/display/111";

        });

        google.maps.event.addListener(marker2, "mouseover", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");

        });

        google.maps.event.addListener(marker2, "mouseout", function(event) {

            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");

        });

        google.maps.event.addListener(marker2, "click", function(event) {

            window.location = "http://localhost/yupsg/places/display/111";

        });

        var LatLngList = [

        new google.maps.LatLng(1.288693,103.846733),

        new google.maps.LatLng(1.288693,103.846733)

        ];




        function changeMarkerOnmouseover(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");

        }

        function changeMarkerOnmouseout(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");

        }



        function changeMarkerOnmouseover(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");

        }

        function changeMarkerOnmouseout(marker) {

            marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");

        }


            var start = "35 Oxford Street, Cambridge, MA 02138";

            var end = "24 Oxford Street, Cambridge, MA 02138";

            var request = {

                origin:start,

                destination:end,

                travelMode: google.maps.TravelMode.DRIVING

            };

        directionsService.route(request, function(result, status) {

            if (status == google.maps.DirectionsStatus.OK) {

                directionsDisplay.setDirections(result);

            }

          });
</script>
</body>
</html>