我正在使用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>
答案 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>