如何在Google地图网址中设置路标 [英] How to set waypoints in the googlemaps url

问题描述

我有一个拥有地图的网站。我有一个输入城市名称的文本框，我想从一个已经设置的特定目的地旅行。要到达这个目的地，我已经在我的代码中硬编码了航点。

所有这些都很好，我现在有一个按钮，当点击时给我指示（文本格式），当我点击另一个按钮时，我得到一个小显示我的起点和终点的地图。我希望将我的航点添加到此地图中。

我希望它看起来像这样：
http://img209.imageshack.us/img209/1121/whatiwant.png

'p>但我得到的是：
的http：// img687。第二张照片代码：

<$> p $ p> window.open（http://maps.google.com/maps?f=d&source=s_d&saddr=+ document.getElementById（fromAddress）。value + &安培;毫弧度= +航点+&安培; DADDR = LT;％= GetToAddress（）％>&安培; HL = SV&安培;地址解析= XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX = LS&安培; SLL = 37.0625，-95.677068&安培; SSPN = 47.167389,75.410156&安培;即= UTF8&安培; Z = 7和;层= C&安培; PW = 2\" ， mywindow的）;


它原来是在我的变化之前：

  window.open（http://maps.google.com/maps?f=d&source=s_d&saddr=+ document.getElementById（fromAddress）。value +&安培; DADDR = LT;％= GetToAddress（）％>&安培; HL = SV&安培;地址解析= XXXXXXXXXXXXXXXXXXXXXXX = 37.0625，-95.677068&安培; SSPN = 47.167389,75.410156&安培，即= UTF8&安培; Z = 7&安培;层= 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 Maps URL中使用哪些参数经纬度？

但我无法找到如何添加我的方式指向地图。

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

我使用了mrdad属性，因为它看起来是最为逻辑的选择，因为它说：mrad：让你指定一个额外的目标地址。

我在这里错过了什么吗？也许缺少一些属性？

Thankfull获取答案！ &安培;如果有什么不清楚的只是问！

// Ra3IDeN

编辑：

给我所需路线的代码（当我点击按钮show route时的exxecutes）：

 <$ c 
 
 //重置地图
 if（waypoints.length> 0）{
 request = {
 origin：null， 
 destination：null，
航点：[]，
 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; 
航点= []; 
 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 =Domesticrunat =servervisible =false> 
 / *不需要渡轮* / 
 var noOfPoints = 2; 
 var waypoints = new Array（noOfPoints）; 
航点[0] = fromAddress; 
 waypoints [1] ='<％= GetToAddress（）％>'; 
< / asp：PlaceHolder> 
 
< asp：PlaceHolder ID =Internationalrunat =servervisible =false> 
 / *需要渡轮* / 
 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（目的地）; 
 
 //将属性设置为一个对象
< / asp：PlaceHolder> 
 request = {
 origin：vpM，
 destination：destination，
 waypoints：waypoints，
 travelMode：google.maps.DirectionsTravelMode.DRIVING，
 optimizeWaypoints ：true，
 avoidHighways：false，
 avoidTolls：true 
}; 
 
 //显示resutl 
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 directionsDisplay.setMap（mapdir）; 
 directionsDisplay.setPanel（document.getElementById（directions））; 
 
 //绘制路线
 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=+文档。 getElementById（fromAddress）。value +& daddr =<％= GetToAddress（）％>& hl = sv& geocode = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX = 1s& 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; 
 
}）; 
  

解决方案

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

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

如果您检查注释，它会显示我花了一些时间来解释上述解决方案。 Dr.Molle所做的就是他将最终目的地设置为航路点1！

所以最终目的地我的情况成为航点1，航点1成为航点2和我的最终目的地

查看图片以获得澄清：
http://img6.imageshack.us/img6/8035/resulty.png

A --- StartPoint

B --->（daddr）航点1

<------> C ------->航点2

------->航点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=+文档。t.getElementById（ FROMADDRESS）值+ &安培; DADDR = + request.waypoints [0] .location.toUrlValue（）+ + + 至 + request.waypoints [1] .location.toUrlValue （）+ + + 至 +<％= GetToAddress（）％>&安培; HL = SV&安培;地址解析= 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）％>'）; 
返回false; 
}）; 
  

要查看代码的其余部分，请在编辑下查看我的问题。

非常感谢Dr.Molle，我希望iive能够清楚地说明这一点，以便其他人可以从中受益。

I have a site that has a map. I have a textfield where i type in the city name that i want to travel from to a specific destination that is already set. to get to this destination I have hardcoded waypoints in my code.

All of this works great, i Now have a button that when clicked on gives me the directions (text format) and when i click on a another button i get a small map that shows me the start and end point. I want to add my waypoints to this map aswell.

I want it to look like this: http://img209.imageshack.us/img209/1121/whatiwant.png

But what i get is: http://img687.imageshack.us/img687/1554/whatigetm.png

Code for the second picture:

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");

how it originaly was before my changes:

 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");

original look: http://img441.imageshack.us/img441/56/originalhd.png

as you can see here i also lose the direction text when i add the "mrad" property.

Ive been reading up on these properties on the following links: 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?

But i cant find how to add my waypoints to the map.

I'm basicly looking for how to add my waypoints to the map and at the same time not lose my direction text that is shown in the last picture.

I used the mrdad property since it seemd the most logic choice since it says : "mrad: lets you specify an additional destination address."

Have i missunderstood something here? perhaps missing some properties?

Thankfull for answers! & if anything is unclear just ask!

//Ra3IDeN

EDIT:

The code that gives me the desired route(exxecutes when i click on the button "show route"):

 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);
            }
          });     
        }

using the via property did not give me any changes but perhaps i used it the wrong way?:

 $('#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;

            });

解决方案

Ok finaly!

Add several addresses programatically into a google map

This was the basic soloution for this problem with some special tweaks that i will describe below. Dr.Molle to be fair i would never have solved this without your help, i will paste the code and if you wish copy the code and post it as a solution and i will accept it.

If you check the comments it will show that It took me some time to understad the solution above. What Dr.Molle did was that he set the final destination as waypoint 1!

so final destination i my case became waypoint 1, waypoint 1 became waypoint 2 and my final destination became waypoint 3.

Check picture for clarification: http://img6.imageshack.us/img6/8035/resulty.png

A---StartPoint

B--->(daddr) Waypoint 1

C-------> waypoint 2

D-------> Waypoint 3( the original final destination)

I also added the property "&dirflg=t" becaouse it avoids road tolls and gives me a route that travels via ferry.

the code :

 $('#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;
    });

To see rest of the code, look at my question under EDIT.

thanks alot Dr.Molle and i hope that ive made this clear enough so others may benifit from it.

这篇关于如何在Google地图网址中设置路标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！