Google方向错误:未定义请求

时间:2011-06-03 23:57:47

标签: php javascript google-maps google-maps-api-3

我正在使用Google Maps V3 API的说明。但是当我运行它时出现javascript错误:未捕获的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>

1 个答案:

答案 0 :(得分: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>