我有一个有地图的网站。我有一个文本字段,我输入我要前往已设置的特定目的地的城市名称。为了到达这个目的地,我的代码中有硬编码的航路点。
所有这一切都很棒,我现在有一个按钮,当点击时给我指示(文本格式),当我点击另一个按钮时,我得到一个小地图,显示我的起点和终点。我想在这张地图上添加我的航点。
我希望它看起来像这样: http://img209.imageshack.us/img209/1121/whatiwant.png
但我得到的是: http://img687.imageshack.us/img687/1554/whatigetm.png
第二张图片的代码:
window.open("http://maps.google.com/maps?f=d&source=s_d&saddr=" + document.getElementById("fromAddress").value + "&mrad="+waypoints +"&daddr=<%=GetToAddress() %>&hl=sv&geocode=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=ls&sll=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2","mywindow");
在我改变之前它原来是怎样的:
window.open("http://maps.google.com/maps?f=d&source=s_d&saddr=" + document.getElementById("fromAddress").value +"&daddr=<%=GetToAddress() %>&hl=sv&geocode=XXXXXXXXXXXXXXXXXXXXXXX=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2","mywindow");
原貌: http://img441.imageshack.us/img441/56/originalhd.png
正如你在这里看到的那样,当我添加“mrad”属性时,我也会丢失方向文本。
我一直在阅读以下链接中的这些属性: http://www.seomoz.org/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters http://mashupguide.net/1.0/html/ch02s05.xhtml What parameters should I use in a Google Maps URL to go to a lat-lon?
但我无法找到如何将我的航点添加到地图中。
我基本上正在寻找如何将我的航点添加到地图中,同时不会丢失我在上一张照片中显示的方向文字。
我使用了mrdad属性,因为它似乎是最合乎逻辑的选择,因为它说:“mrad:允许你指定一个额外的目标地址。”
我在这里想念一些东西吗?也许缺少一些属性?
感谢您的回答! &安培;如果有什么不清楚请问!
// Ra3IDeN
编辑:
为我提供所需路线的代码(当我点击“显示路线”按钮时出现异常):
function overlayDirections()
{
// reset the map
if(waypoints.length >0){
request = {
origin: null,
destination: null,
waypoints: [],
travelMode: google.maps.DirectionsTravelMode.DRIVING,
optimizeWaypoints:true,
avoidHighways:true,
avoidTolls: true
};
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
origin = null;
destination = null;
waypoints = [];
directionsDisplay.setMap(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(mapdir);
}
$("#directions").text('');
//$("#map_dir").empty();
viaAddress = document.getElementById('viaAddress').value;
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*/
var vpM = fromAddress;
if (viaAddress == 'Rostock')
var wp1 = new google.maps.LatLng(55.357953,13.14894);
else
var wp1 = new google.maps.LatLng(55.37417,13.14731);
addMarker(wp1);
waypoints.push({ location: wp1, stopover: true });
if(viaAddress != 'Rostock')
var wp2 = new google.maps.LatLng(53.93406,10.841789);
else
var wp2 = new google.maps.LatLng(54.152747,12.098023);
addMarker(wp2);
waypoints.push({ location: wp2, stopover: true });
destination =new google.maps.LatLng(<%=GetToAddress() %>);
addMarker(destination);
// set properties to a object
</asp:PlaceHolder>
request = {
origin: vpM,
destination: destination,
waypoints: waypoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
optimizeWaypoints:true,
avoidHighways:false,
avoidTolls: true
};
//displays the resutl
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(mapdir);
directionsDisplay.setPanel(document.getElementById("directions"));
// draws the route
gdir.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
使用via属性并没有给我任何改变,但也许我用错了方法?:
$('#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=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=ls&sll=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2","mywindow" + "&via="+ waypoints[1],waypoints[2]);
else
alert('<%=GetKey("HotelPrintNoFromAddress") %>');
return false;
});
答案 0 :(得分:4)
好的最终!
Add several addresses programatically into a google map
这是这个问题的基本解决方案,我将在下面介绍一些特殊的调整。 Dr.Molle公平地说,如果没有你的帮助我永远不会解决这个问题,我会粘贴代码,如果你想复制代码并将其作为解决方案发布,我会接受它。
如果你查看评论,它会显示我花了一些时间来解决上面的解决方案。 Dr.Molle所做的是他将最终目的地设定为航点1!
所以最终目的地我的情况是航点1,航点1成为航点2,我的最终目的地成为航点3。
查看图片以澄清: http://img6.imageshack.us/img6/8035/resulty.png
A --- StartPoint可以
B ---&gt;(daddr)Waypoint 1
c ^ -------&GT;航点2
d -------&GT; Waypoint 3(原始最终目的地)
我还添加了“&amp; dirflg = t”这个属性,因为它避免了公路收费,并给了我一条通过渡轮旅行的路线。
代码:
$('#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=" + request.waypoints[0].location.toUrlValue() + "+" + "to:" + request.waypoints[1].location.toUrlValue()+ "+" + "to:"+"<%=GetToAddress()%>&hl=sv&geocode=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=ls&sll=37.0625,-95.677068&sspn=47.167389,75.410156&ie=UTF8&z=7&layer=c&pw=2" + "&dirflg=t","mywindow");
}
else
alert('<%=GetKey("HotelPrintNoFromAddress") %>');
return false;
});
要查看其余代码,请在EDIT下查看我的问题。
非常感谢Dr.Molle,我希望我能够清楚地说明这一点,以便其他人可以从中受益。