如何获得在水上旅行的路线？ [英] How to get a route that travels over water?
问题描述
嗨！
我已经完成了将googlemaps版本2升级到版本3的任务。
我在这里阅读googlemaps： https://developers.google.com/maps/documentation/ javascript / examples / [ ^ ]
其中大部分内容非常有用，包含升级到版本3所需的大部分所需答案。
可悲的是，我有一个问题，我无法找到解决方案。
问题：
我有一张地图，显示从用户选择的起点开始的路线，这些路线经过航路点并最终进入决赛目的地，像这样：
来自城市的用户类型--------->通过标准航点（标记B）---->进入第二个方向（标记c）---------->到达最终目的地。
那么这里的问题是什么？
我希望用户能够找到向他/她展示路线的方向在两个国家之间使用渡轮但是我得到了一条路线：
起点---------->航路点----> ;回去找一座桥和conntinnues这样做整个路线（不惜一切代价避免水），最后到达最终目的地。
图片：< br $>
第一航点的起点（马克A ---->马克B）
http://imageshack.us/photo/my-images/24/number1b.png/ [ ^ ]
正如你所看到的那样，它从航路点返回并找到了一条介于马尔默和哥本哈根之间的桥梁。
Mark B ----> Mark C
http://imageshack.us/photo/my-images/21/number2l.png/ [ ^ ]
As在这里看到它前往第二个航点，然后转向最终的目的地。
整个不受欢迎的路线：
http://imageshack.us/photo/my-images/51/number3i.png/ [ ^ ]
我想要的是什么：
http：//img843.imageshack .us / img843 / 7837 / wishy.png [ ^ ]
我想要路线给我从航路点B到路线C的路线但是我想从特雷勒堡到达旅行路线o rostock乘坐渡轮旅行。
我尝试在水面上设置坐标，并认为googlemaps会自动了解它必须通过渡轮旅行，这就是它的方式在版本2中完成（在我正在进行的项目上），但事实并非如此。我试过改变旅行模式但是没有用。
我一直在读这个并寻找答案，但我找不到任何可以帮助我的东西，要么我遗失了什么，要么我不知道我做错了什么。
代码：
文件准备就绪：
函数initialize（）{
//页面上的地图
map = new google.maps。地图（document.getElementById（'map'），{
zoom：10，
center：new google.maps.LatLng（<％ = CenterCoords ％> ），
mapTypeId：google.maps.MapTypeId.TERRAIN
}）;
map.setCenter（new google.maps.LatLng（<％ = CenterCoords ％> ），<％ = ZoomLevel ％> ）; //
var marker;
marker = new google.maps.Marker（{
position：new google.maps.LatLng（<％ = CenterCoords ％> ），
map：map
}）;
mapdir = new google.maps.Map（document.getElementById（'map_dir'），{
zoom：10，
center：new google.maps.LatLng（<％ = CenterCoords ％> ），
mapTypeId：google.maps.MapTypeId.TERRAIN
}）;
mapdir.setCenter（new google.maps.LatLng（<％ = CenterCoords ％> ），<％ = ZoomLevel ％> ）; //
var markerdir;
markerdir = new google.maps.Marker（{
position：new google.maps.LatLng（<％ = CenterCoords ％> ），
map：mapdir
}）;
gdir = new google.maps.DirectionsService（mapdir，document.getElementById（directions））;
google.maps.event.addDomListener（gdir，error，handleErrors）;
$（＃aspnetForm）。submit（function（）{
overlayDirections（）;
// new google.maps.DirectionsService（）;
返回false;
}）;
//使用Google地图中的图像打印地图
$（＃print-map）。click（function（）{
$（'。divMapToPrint'）。 jqprint（{printContainer：false}）;
返回false;
}）
//使用Google地图打印方向
$（'＃print-directions'） .click（function（）{
if（document.getElementById（fromAddress）。value！=''）
window.open（http://maps.google.com/maps?f = d& source = s_d& saddr =+ document.getElementById（fromAddress）。value +& daddr = <％ = GetToAddress（）％> &安培; HL = SV&安培;地址解析= AIzaSyDFPnl71Kf3R8ZJW3EEorajmOnf9y9LExw&安培; MRA = LS&安培; SLL = 37.0625，-95.677068&安培; SSPN = 47.167389,75.410156&安培，即= UTF8&安培; Z = 7& layer = c& pw = 2，mywindow）;
else
alert（'<％ =获取键（ HotelPrintNoFromAddress）％> '）;
返回false;
}）;
}
用户互动代码：
function overlayDirections（）
{
$（＃directions）。text（' ）;
fromAddress = document.getElementById（fromAddress）。value;
var language ='<％ = CurrentPage.LanguageBranch ％> ';
< asp：PlaceHolder ID = 国内 runat = server 可见 = false >
/ *不需要渡轮* /
var noOfPoints = 2;
var waypoints = new Array（noOfPoints）;
waypoints [0] = fromAddress;
waypoints [1] ='<％ = GetToAddress（）％> ';
< / asp：PlaceHolder >
< asp：PlaceHolder ID = 国际 runat = server 可见 = false >
/ *需要渡轮* /
viaAddress = document.getElementById（'viaAddress'）。value;
var noOfPoints = 4;
var waypoints = new Array（noOfPoints）;
waypoints [0] = fromAddress;
if（viaAddress =='Rostock'）
waypoints [<％ = GetVia（ 1 ）％> ] = '55 .306898,13.131795'; //（特瑞堡 - 罗斯托克）55.372387,13.149916
else
航路点[<％ = GetVia（ 1 ）％> ] = '55 .309805,13.119736';
航点[<％ = GetVia（ 2 ）％> ] = viaAddress;
waypoints [3] ='<％ = GetToAddress（）％> ';
< / asp：PlaceHolder >
directionsDisplay = new google.maps.DirectionsRenderer（）;
directionsDisplay.setMap（mapdir）;
gdir.route（{
origin：waypoints [0]，
destination：waypoints [3]，
waypoints：[{
location：waypoints [1]
}，
{
location：waypoints [2]
}]，
provideRouteAlternatives：true，
travelMode：google.maps.DirectionsTravelMode.DRIVING
}，函数（结果，状态）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（结果） ）;
}
}）;
}
如果有的话目前还不清楚只是问。
谢谢你的答案！
（＃aspnetForm）。submit（function（）{
overlayDirections（）;
// new google.maps.DirectionsService（）;
return false;
}）;
//使用Google地图中的图像打印地图
（＃print-map）。click（function（）{
（'。divMapToPrint'）。jqprint（{printContainer：false}）;
返回false;
}）
//使用Google地图打印方向
Hi!
I have been given the task to upgrade googlemaps version 2 to version 3.
I have been reading up on googlemaps here: https://developers.google.com/maps/documentation/javascript/examples/[^]
And most of it is rather helpfull and contains most of the needed answers one needs to upgrade to version 3.
Sadly I have a problem which I have not been able to find a soloution to.
Issue:
I have a map that displays directions from a startpoint of the users chosing which goes through waypoints and finaly goes to the final destination, like this:
User types in city to travel from---------> goes through standard waypoint(mark B)---->goes to second waypont(mark c)----------> goes to final destination.
So whats the problem here?
well I want the user to recive directions that show him/her a route that uses a ferry between two countries BUT I get a route that does :
Startpoint---------->waypoint---->goes back to find a bridge and conntinnues to do so through the entire route(avoides water at all cost) and finaly it reaches the end destination.
Images:
Startpoint to first waypoint (Mark A----> Mark B)
http://imageshack.us/photo/my-images/24/number1b.png/[^]
As you can see it turns back from the waypoint and finds a bridge that goes between malmö and kopenhagen.
Mark B---->Mark C
http://imageshack.us/photo/my-images/21/number2l.png/[^]
As seen here it travels to the second waypoint and then turns to the final destnation.
The entire undesired route:
http://imageshack.us/photo/my-images/51/number3i.png/[^]
What I want:
http://img843.imageshack.us/img843/7837/wishy.png[^]
I want the route to give me directions from waypoint B to waypont C BUT I WANT IT TO TRAVEL VIA FERRY from trelleborg to rostock via ferry travel.
I tried setting the coordinates over the water and figured that googlemaps would automatically understand that it has to travel by ferry, this is how it was done in version 2(on the project im working on) but it did not. I have tried changing the travelmode but that did not work.
I have been reading up on this and looking for a answer but I have not found anything that can help me, either im missing something or i don''t know what im doing wrong.
The code:
Document ready:
function initialize(){
//Map on page
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(<%=CenterCoords%>),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
map.setCenter(new google.maps.LatLng(<%=CenterCoords%>), <%=ZoomLevel %>); //
var marker;
marker = new google.maps.Marker({
position: new google.maps.LatLng(<%=CenterCoords%>),
map: map
});
mapdir = new google.maps.Map(document.getElementById('map_dir'), {
zoom: 10,
center: new google.maps.LatLng(<%=CenterCoords%>),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
mapdir.setCenter(new google.maps.LatLng(<%=CenterCoords%>), <%=ZoomLevel %>); //
var markerdir;
markerdir = new google.maps.Marker({
position: new google.maps.LatLng(<%=CenterCoords%>),
map: mapdir
});
gdir = new google.maps.DirectionsService(mapdir, document.getElementById("directions"));
google.maps.event.addDomListener(gdir, "error", handleErrors);
$("#aspnetForm").submit(function() {
overlayDirections();
//new google.maps.DirectionsService();
return false;
});
//Print a map using image from Google map
$("#print-map").click( function() {
$('.divMapToPrint').jqprint({ printContainer: false });
return false;
})
//Print direction using Google maps
$('#print-directions').click(function(){
if (document.getElementById("fromAddress").value != '')
window.open("http://maps.google.com/maps?f=d&source=s_d&saddr=" + document.getElementById("fromAddress").value + "&daddr=<%=GetToAddress() %>&hl=sv&geocode=AIzaSyDFPnl71Kf3R8ZJW3EEorajmOnf9y9LExw&mra=ls&sll=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2","mywindow");
else
alert('<%=GetKey("HotelPrintNoFromAddress") %>');
return false;
});
}
user interaction code:
function overlayDirections()
{
$("#directions").text('');
fromAddress = document.getElementById("fromAddress").value;
var language = '<%=CurrentPage.LanguageBranch %>';
<asp:PlaceHolder ID="Domestic" runat="server" visible="false">
/*No ferry is needed*/
var noOfPoints = 2;
var waypoints = new Array(noOfPoints);
waypoints[0] = fromAddress;
waypoints[1] = '<%=GetToAddress() %>';
</asp:PlaceHolder>
<asp:PlaceHolder ID="International" runat="server" visible="false">
/*Ferry is required*/
viaAddress = document.getElementById('viaAddress').value;
var noOfPoints = 4;
var waypoints = new Array(noOfPoints);
waypoints[0] = fromAddress;
if (viaAddress == 'Rostock')
waypoints[<%=GetVia(1) %>] = '55.306898,13.131795'; //(Trelleborg - Rostock) 55.372387,13.149916
else
waypoints[<%=GetVia(1) %>] = '55.309805,13.119736';
waypoints[<%=GetVia(2) %>] = viaAddress;
waypoints[3] = '<%=GetToAddress() %>';
</asp:PlaceHolder>
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(mapdir);
gdir.route({
origin: waypoints[0],
destination: waypoints[3],
waypoints: [{
location: waypoints[1]
},
{
location: waypoints[2]
}],
provideRouteAlternatives: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
If anything is unclear just ask.
thankfull for answers!
("#aspnetForm").submit(function() { overlayDirections(); //new google.maps.DirectionsService(); return false; }); //Print a map using image from Google map
("#print-map").click( function() {
('.divMapToPrint').jqprint({ printContainer: false }); return false; }) //Print direction using Google maps
这篇关于如何获得在水上旅行的路线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://imageshack.us/photo/my-images/51/number3i.png/](http://imageshack.us/photo/my-images/51/number3i.png/\"){kind=link}
![http：//img843.imageshack .us / img843 / 7837 / wishy.png](\"http://img843.imageshack.us/img843/7837/wishy.png\"){kind=link}
