谷歌方向错误:未定义请求

我正在使用Google Maps V3 API的说明。然而，当我运行javscript时，我得到了错误：未捕获引用错误：请求未定义

这是我的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>

您在calcRoute()的范围内定义request，但随后尝试在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>

相关内容

最新更新

热门标签：