2011-06-03 67 views
-1

我正在使用Google Maps V3 API的指示。但是我得到的javscript錯誤,當我運行它: 未捕獲的ReferenceError:請求不被定義Google Directions錯誤:請求未定義

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

我剛剛修改了我的答案,下面包含了一個希望有幫助的近乎最小的一組更改以使您的代碼正常工作。希望能幫助到你! – Trott 2011-06-04 02:45:22

回答

1

您正在定義requestcalcRoute()範圍內,但隨後嘗試使用它在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>