如何在 googlemaps url 中设置航点

Question

我有一个带有地图的网站。我有一个文本字段，在其中输入我想要前往已设置的特定目的地的城市名称。为了到达这个目的地，我在代码中硬编码了路径点。

所有这些都很好用，我现在有一个按钮，单击该按钮会给我指示（文本格式），当我单击另一个按钮时，我会得到一个小地图，显示起点和终点。我也想将我的航点添加到这张地图上。

我希望它看起来像这样： 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 我应该在 Google 地图 URL 中使用哪些参数来获取经纬度？

但我找不到如何将我的航点添加到地图上。

我基本上正在寻找如何将我的航路点添加到地图上，同时不丢失最后一张图片中显示的方向文本。

我使用了 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;

            });

Answer 1

终于好了！

以编程方式将多个地址添加到谷歌地图中

这是这个问题的基本解决方案，并进行了一些特殊的调整，我将在下面描述。Dr.Molle 公平地说，如果没有您的帮助，我永远不会解决这个问题，我将粘贴代码，如果您希望复制代码并将其作为解决方案发布，我会接受它。

如果您检查评论，它会显示我花了一些时间才理解上面的解决方案。Dr.Molle所做的就是将最终目的地设定为航路点1！

所以最终目的地我的情况变成了航点 1，航点 1 变成了航点 2，我的最终目的地变成了航点 3。

检查图片以进行澄清： http://img6.imageshack.us/img6/8035/resulty.png

A---起点

B--->(daddr) 航点 1

C--------> 航路点 2

D----->航点3（原最终目的地）

我还添加了属性“&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;
    });

要查看其余代码，请查看“编辑”下的我的问题。

非常感谢 Molle 博士，我希望我已经说得足够清楚了，这样其他人就可以从中受益。