感谢您提供的任何帮助！我有一个网页，应该显示多个带有行车路线和路线的谷歌地图。但是，我只能加载其中一张地图，而这张地图并未显示行车路线。我正在使用Ruby on Rails来创建页面。
根据Carl的评论编辑3
开头和结尾地址正确显示在底部的“@ newmaps.each do”。但是，我从this.directionsDisplay和this.directionsService获得了JS错误，因此我将两者都移到函数initialize（）中。仍然在DirectionHelper.prototype.calcRoute
中出现错误错误是，“ReferenceError：google未定义” travelMode：google.maps.TravelMode.DRIVING
<script type='text/javascript'>
function DirectionHelper(id)
{
var rendererOptions, chicago, mapOptions;
this.directionsDisplay = null;
this.id = id;
this.map = null;
rendererOptions = {
draggable: true,
panel: document.getElementById('directions_panel' + this.id)
};
function initialize() {
this.directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
this.directionsService = new google.maps.DirectionsService();
chicago = new google.maps.LatLng(41.850033, -87.6500523);
mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById("map_canvas"+this.id), mapOptions);
this.directionsDisplay.setMap(this.map);
google.maps.event.addDomListener(window, 'load', initialize(this.map));
}
}
DirectionHelper.prototype.calcRoute = function(start, end, waypoints){
var request,
self = this;
var request = {
origin: start, // an address or LatLng
destination: end, // an address or a LatLng
optimizeWaypoints: optimize,
travelMode: google.maps.TravelMode.DRIVING
};
this.directionsService.route(request, function(response, status) {
var theRoute, summaryPanel;
if (status == google.maps.DirectionsStatus.OK) {
self.directionsDisplay.setDirections(response);
theRoute = response.routes[0];
summaryPanel = document.getElementById("directions_panel" + self.id);
summaryPanel.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < theRoute.legs.length; i++) {
var routeSegment = i+1;
summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel.innerHTML += theRoute.legs[i].start_address + " to ";
summaryPanel.innerHTML += theRoute.legs[i].end_address + "<br />";
summaryPanel.innerHTML += theRoute.legs[i].distance.text + "<br />";
summaryPanel.innerHTML += theRoute.legs[i].duration.text + "<br /><br />";
}
}
if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
}
if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
}
if(status == google.maps.DirectionsStatus.NOT_FOUND){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
}
if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
}
});
};
var dirHelper = null;
<% @newmaps.each do |newsavedmap| %>
dirHelper = new DirectionHelper(<%= newsavedmap.id %>);
<%= "dirHelper.calcRoute('#{newsavedmap.start}', '#{newsavedmap.end}');" %>
<% end %>
</script>
更早版本
的Javascript
<script type='text/javascript'>
<% for newsavedmap in @newmaps %>
$(function(){
var directionsDisplay<%= newsavedmap.id %>;
var map<%= newsavedmap.id %>;
google.maps.event.addDomListener(window, 'load', initialize(map<%= newsavedmap.id %>));
});
var directionsService<%= newsavedmap.id %> = new google.maps.DirectionsService();
function initialize() {
var rendererOptions<%= newsavedmap.id %> = {
draggable: true,
panel:document.getElementById('directions_panel<%= newsavedmap.id %>')
};
directionsDisplay<%= newsavedmap.id %> = new google.maps.DirectionsRenderer(rendererOptions<%= newsavedmap.id %>);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map<%= newsavedmap.id %> = new google.maps.Map(document.getElementById("map_canvas<%= newsavedmap.id %>"), mapOptions);
directionsDisplay<%= newsavedmap.id %>.setMap(map<%= newsavedmap.id %>);
}
function calcRoute() {
var request<%= newsavedmap.id %> = {
origin: '<%= newsavedmap.start %>',
destination: '<%= newsavedmap.end %>',
waypoints: '<%= newsavedmap.waypoints %>',
optimizeWaypoints: optimize,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService<%= newsavedmap.id %>.route<%= newsavedmap.id %>(request<%= newsavedmap.id %>, function(response<%= newsavedmap.id %>, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay<%= newsavedmap.id %>.setDirections(response<%= newsavedmap.id %>);
var route<%= newsavedmap.id %> = response<%= newsavedmap.id %>.routes[0];
var summaryPanel<%= newsavedmap.id %> = document.getElementById("directions_panel<%= newsavedmap.id %>");
summaryPanel<%= newsavedmap.id %>.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < route<%= newsavedmap.id %>.legs.length; i++) {
var routeSegment = i+1;
summaryPanel<%= newsavedmap.id %>.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel<%= newsavedmap.id %>.innerHTML += route<%= newsavedmap.id %>.legs[i].start_address + " to ";
summaryPanel<%= newsavedmap.id %>.innerHTML += route<%= newsavedmap.id %>.legs[i].end_address + "<br />";
summaryPanel<%= newsavedmap.id %>.innerHTML += route<%= newsavedmap.id %>.legs[i].distance.text + "<br />";
summaryPanel<%= newsavedmap.id %>.innerHTML += route<%= newsavedmap.id %>.legs[i].duration.text + "<br /><br />";
}
}
if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
}
if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
}
if(status == google.maps.DirectionsStatus.NOT_FOUND){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
}
if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
}
});
};
<% end if @newmaps %>
</script>
HTML
<% for newsavedmap in @newmaps %>
<div class="wholemap">
<% if newsavedmap.name != nil and newsavedmap.name != '' %>
<h4><%= newsavedmap.name %></h4>
<% else %>
<h4>Untitled Map</h4>
<% end %>
<a class="directions" href="#">Show Driving Directions</a>
<div class="clear"></div>
<div class="map" id="map_canvas<%= newsavedmap.id %>"></div>
<div class="route" id="directions_panel<%= newsavedmap.id %>"></div>
<div class="clear"></div>
<a id="print<%= newsavedmap.id %>" target="_blank" class="printmap">Print this map</a>
<div class="clear"></div>
</div>
<% end %>
示例JS结果
$(function(){
var directionsDisplay6;
var map6;
google.maps.event.addDomListener(window, 'load', initialize(map6));
});
var directionsService6 = new google.maps.DirectionsService();
function initialize() {
var rendererOptions6 = {
draggable: true,
panel:document.getElementById('directions_panel6')
};
directionsDisplay6 = new google.maps.DirectionsRenderer(rendererOptions6);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map6 = new google.maps.Map(document.getElementById("map_canvas6"), mapOptions);
directionsDisplay6.setMap(map6);
}
function calcRoute() {
var request6 = {
origin: '2750 Pleasant Hill Rd Duluth, GA 30096',
destination: '500 Lee Drive, Baton Rouge, Louisiana 70808',
waypoints: '737 Denham Progress Rd Buckatunna, MS 39322',
optimizeWaypoints: optimize,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService6.route6(request6, function(response6, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay6.setDirections(response6);
var route6 = response6.routes[0];
var summaryPanel6 = document.getElementById("directions_panel6");
summaryPanel6.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < route6.legs.length; i++) {
var routeSegment = i+1;
summaryPanel6.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel6.innerHTML += route6.legs[i].start_address + " to ";
summaryPanel6.innerHTML += route6.legs[i].end_address + "<br />";
summaryPanel6.innerHTML += route6.legs[i].distance.text + "<br />";
summaryPanel6.innerHTML += route6.legs[i].duration.text + "<br /><br />";
}
}
if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
}
if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
}
if(status == google.maps.DirectionsStatus.NOT_FOUND){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
}
if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
}
});
};
$(function(){
var directionsDisplay7;
var map7;
google.maps.event.addDomListener(window, 'load', initialize(map7));
});
var directionsService7 = new google.maps.DirectionsService();
function initialize() {
var rendererOptions7 = {
draggable: true,
panel:document.getElementById('directions_panel7')
};
directionsDisplay7 = new google.maps.DirectionsRenderer(rendererOptions7);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map7 = new google.maps.Map(document.getElementById("map_canvas7"), mapOptions);
directionsDisplay7.setMap(map7);
}
function calcRoute() {
var request7 = {
origin: '1600 Pennsylvania Avenue, Washington, DC 20500',
destination: '103 Federal St Pittsburgh, PA 15212',
waypoints: '50 Summit Ave Hagerstown, MD 21740',
optimizeWaypoints: optimize,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService7.route7(request7, function(response7, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay7.setDirections(response7);
var route7 = response7.routes[0];
var summaryPanel7 = document.getElementById("directions_panel7");
summaryPanel7.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < route7.legs.length; i++) {
var routeSegment = i+1;
summaryPanel7.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel7.innerHTML += route7.legs[i].start_address + " to ";
summaryPanel7.innerHTML += route7.legs[i].end_address + "<br />";
summaryPanel7.innerHTML += route7.legs[i].distance.text + "<br />";
summaryPanel7.innerHTML += route7.legs[i].duration.text + "<br /><br />";
}
}
if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
}
if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
}
if(status == google.maps.DirectionsStatus.NOT_FOUND){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
}
if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
}
});
};
编辑1
感谢Carl的尝试。直接的解决方案不起作用，但也许调整会有所帮助。我做的第一件事是改变Ruby代码以适应我的设置：
<script type="text/javascript">
var dirHelper = null;
<% @newmaps.each do |newsavedmap| %>
dirHelper = new DirectionHelper(newsavedmap.id);
dirHelper.calcRoute(newsavedmap.start, newsavedmap.end, newsavedmap.waypoints);
<% end %>
</script>
我在控制台中的即时错误：DirectionHelper未定义。我通过将上面的Ruby javascript与用于Google Maps的Javascript结合起来解决了这个问题。
下一个错误：未定义newsavedmap。我尝试用＆lt;％= newsavedmap.WHATEVER％＆gt;替换newsavedmap来解决这个问题。并在引号内包含起点，终点和航点。但是，这只会导致另一个错误（a为空：与我的Google广告javascript有关，这应该可以正常工作。）接下来我该怎么办？我应该采取不同的方法吗？
修改2
我已经尝试了Carl的最新解决方案（谢谢！）但遇到了更多错误。这是我的设置：我使用了他的函数DirectionHelper代码和顶部块中的所有其他内容完全按原样。然后，在一个特定于我的“newmaps”视图的单独标签中，我使用了底部的Ruby代码。它看起来像这样：
<script type="text/javascript">
var dirHelper = null;
<% @newmaps.each do |newsavedmap| %>
dirHelper = new DirectionHelper(newsavedmap.id);
<%= "dirHelper.calcRoute('#{newsavedmap.start}', '#{newsavedmap.end}', '#{'5 Main Street Charlestown MA'}');" %>
<% end %>
</script>
请注意，我为路标使用了一个常量，因为它们给了我一堆错误，我想将它与javascript问题分开。
现在，我只是给出了一个javascript错误：newsavedmap未定义。有什么想法吗？
答案 0 :(得分：0)
2013.08.15好的，用所有js，html，css的完整示例更新我的答案。你可以自己填写红宝石，这将是微不足道的。
HTML页面：
<!doctype html>
<html>
<head>
<title>multi directions</title>
<link rel="stylesheet" href="site.css" type="text/css"/>
</head>
<body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
CSS
.map{
width:500px;
height:300px;
border: solid 1px #000;
margin-bottom:10px;
}
.directions{
width:500px;
border: dashed 1px #000;
margin-bottom: 10px;
}
JS
function DirectionHelper(id)
{
var rendererOptions, chicago, mapOptions;
this.directionsDisplay = null;
this.id = id;
this.map = null;
this.directionsService = new google.maps.DirectionsService();
var startElement = document.createElement('input');
startElement.id = 'start_'+id;
startElement.value = 'The Loop';
document.body.appendChild(startElement);
var endElement = document.createElement('input');
endElement.id = 'end_'+id;
endElement.value = 'Grant Park';
document.body.appendChild(endElement);
var mapElement = document.createElement('div');
mapElement.id = "map_" + id;
mapElement.className = 'map';
document.body.appendChild(mapElement);
var directionsPanelElement = document.createElement('div');
directionsPanelElement.id = 'directions_panel'+id;
directionsPanelElement.className='directions';
document.body.appendChild(directionsPanelElement);
rendererOptions = {
draggable: true,
panel: document.getElementById('directions_panel' + this.id)
};
this.directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
chicago = new google.maps.LatLng(41.850033, -87.6500523);
mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById("map_"+this.id), mapOptions);
this.directionsDisplay.setMap(this.map);
}
DirectionHelper.prototype.calcRoute = function(start, end, waypoints){
var request,
self = this;
request = {
origin: start, // an address or LatLng
destination: end, // an address or a LatLng
travelMode: google.maps.TravelMode.DRIVING
};
console.log(request)
this.directionsService.route(request,function(r,s){ console.log('shit') })
this.directionsService.route(request, function(response, status) {
var theRoute, summaryPanel;
if (status == google.maps.DirectionsStatus.OK) {
self.directionsDisplay.setDirections(response);
theRoute = response.routes[0];
summaryPanel = document.getElementById("directions_panel" + self.id);
summaryPanel.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < theRoute.legs.length; i++) {
var routeSegment = i+1;
summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel.innerHTML += theRoute.legs[i].start_address + " to ";
summaryPanel.innerHTML += theRoute.legs[i].end_address + "<br />";
summaryPanel.innerHTML += theRoute.legs[i].distance.text + "<br />";
summaryPanel.innerHTML += theRoute.legs[i].duration.text + "<br /><br />";
}
}
if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
alert("Error: You have included more than eight stops along the way. Please use only eight or fewer stops, and try again.");
}
if(status == google.maps.DirectionsStatus.INVALID_REQUEST){
alert("Error: You may be missing a starting or ending point, or you may have included two starting points or two ending points: one in the dropdown menu and one in the entry box. Please edit your map and try again.");
}
if(status == google.maps.DirectionsStatus.NOT_FOUND){
alert("Error: One or more of your addresses was not found. If you think this is an error with our website, please contact us.");
}
if(status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT){
alert("We're sorry! This is an internal error with Go See Campus. Please contact us so we can resolve it.");
}
if(status == google.maps.DirectionsStatus.UNKNOWN_ERROR){
alert("Error: Something went wrong when you loaded this page. Try loading the page again. You may need to log out, clear your temporary files, and log back in.");
}
});
};
function initialize() {
var dirHelper = null;
for(var i=1; i<6; i++){
dirHelper = new DirectionHelper(i);
dirHelper.calcRoute(document.getElementById('start_'+i).value, document.getElementById('end_'+i).value);
}
}
google.maps.event.addDomListener(window, 'load', initialize);