jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

標題: 請問路程規劃 [打印本頁]

作者: a29288279 時間: 2010-4-28 15:26 標題: 請問路程規劃

請問
有GOOGLE MAP的路程規劃的程式碼嗎
或參考範例嗎

謝謝

作者: wmh 時間: 2010-4-28 20:31

可以參考 Google Maps API 的說明文件，有針對導航這部份的簡介：
http://code.google.com/intl/zh-T ... ces.html#Directions

作者: a29288279 時間: 2010-4-28 23:39

因為我有試過了...

可是我還是沒辦法讓她跟我的地圖結合在一起
我的起始點跟終點都設好了按規劃路程
可是卻都不會有反應.....

作者: wmh 時間: 2010-4-29 01:04

按了路線規劃後，你做了哪些動作呢？
有用 Firebug 看看是否有 JavaScript 錯誤訊息嗎？

作者: a29288279 時間: 2010-4-29 22:20

沒有欸...因為我是程式白痴.......
可是因為環境所需所以一定要弄出來....
所以我才苦惱ˊˋ

能交一下嗎!!!
謝謝

作者: wmh 時間: 2010-4-29 23:41

官方網站上的說明還蠻清楚的耶，可能你需要知道一些除錯的方式。
你的範例可以放上來看看嗎？

作者: a29288279 時間: 2010-5-4 16:17

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAXOLVRIWsCG5G3tN4BJ8sIhRcdmPlwX9q6Bf74wo2AuSwtqvg_BRSuMwQDRKWdt7G79PMoNSd_K_EIQ"
      type="text/javascript"></script>

<script language="javascript">

var map = null;
var gdir;
var geocoder = null;
var marker;
var addressMarker;

function initialize()  {
      if (GBrowserIsCompatible())  {
         map = new GMap2(document.getElementById("map"));
gdir = new GDirections(map, document.getElementById("directions"));
   GEvent.addListener(gdir, "load", onGDirectionsLoad);
      GEvent.addListener(gdir, "error", handleErrors);

         map.addControl(new GLargeMapControl());                //加入地圖縮放工具

         map.setCenter(new GLatLng(25.037102,121.564515), 15); //設定台灣為中心點
         geocoder = new GClientGeocoder();
function setDirections(fromAddress, toAddress, locale) {
   gdir.load("from: " + fromAddress + " to: " + toAddress,
            { "locale": locale });
}

function handleErrors(){
   if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
      alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
   else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
      alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

   else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
      alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong
//    alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);

   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
      alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

   else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
      alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

   else alert("An unknown error occurred.");

}

function onGDirectionsLoad(){
   // Use this function to access information about the latest load()
   // results.

   // e.g.
   // document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
   // and yada yada yada...
}
function createMarker(point,title,html){
      var marker = new GMarker(point);
      GEvent.addListener(marker, "click", function()
      {
         marker.openInfoWindowHtml(
            html,
            {
                  maxContent: html,
                  maxTitle: title}
            );
      });
      return marker;
}

function showAddress(address)
{
      if (geocoder)
      {
         geocoder.getLatLng(
            address,
            function(point)
            {
                  if (!point)
                  {
                     alert(address + " not found");
                  }
                  else
                  {
                     if(marker)  //移除上一個點
                     {
                        map.removeOverlay(marker);
                     }

                     map.setCenter(point, 13);

                     var title = "地址";

                     marker = createMarker(point,title,address);

                     map.addOverlay(marker);

                     marker.openInfoWindowHtml(
                        address,
                        {
                              maxContent: address,
                              maxTitle: title}
                        );
                  }
            }
         );
      }
}
</script>

</head>
<body onLoad="initialize()" onUnload="GUnload()">
<form action="#" onSubmit="showAddress(this.address.value); return false">
      <p>
         <input type="text" size="60" name="address" value="台北縣新店市安忠路99號" />
         <input type="submit" value="Go!" />
      </p><table>

<tr><th align="right">起點地址: </th>

<td><input type="text" size="25" id="fromAddress" name="from"
   value="台北縣新店市"/></td>
<th align="right"> 終點地址: </th>
<td align="right"><input type="text" size="25" id="toAddress" name="to"
   value="台北縣永和市" /><input name="submit" type="submit" value="Get Directions!" /></td></tr>
</table>
      <body onload="initialize()" onunload="GUnload()">
  <form action="#" onSubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">

      <div id="map" style="width: 750px; height: 500px">
<div id="left" style="width: 495px">
<div id="map" style="width: 750px; height: 500px"></div>
</form>

</body>
</html>
<tr>
<td height="495" colspan="2" align="left" valign="top" background="images/Attractions_12.gif">     
   <p>      <a href="http://fs2.just.edu.tw/~s961234227/Attractions1.php" target="_parent">微笑單車租賃站</a>       </p>
      <p>      <a href="http://fs2.just.edu.tw/~s961234227/AttractionsA.php" target="_parent">八里左岸自行車道</a></p>
   <p>      <a href="http://fs2.just.edu.tw/~s961234227/AttractionsB.php" target="_parent">淡水河岸自行車道</a>       </p>
   <p>      <a href="http://fs2.just.edu.tw/~s961234227/AttractionsC.php" target="_parent">金色水岸自行車道</a></p>
   <p>     <a href="http://fs2.just.edu.tw/~s961234227/AttractionsD.php" target="_parent">舊草嶺隧道自行車道</a></p>
   <p>      <a href="http://fs2.just.edu.tw/~s961234227/AttractionsE.php" target="_parent">白齡右岸公園自行車道</a>       </p>
   <p>      <a href="http://fs2.just.edu.tw/~s961234227/AttractionsF.php" target="_parent">彩虹河濱公園自行車道</a>       </p>
   <p>      <a href="http://fs2.just.edu.tw/~s961234227/AttractionsG.php" target="_parent">漁人碼頭自行車道</a>       </p>
   <p>      <a href="http://fs2.just.edu.tw/~s961234227/AttractionsH.php" target="_parent">北投焚化爐自行車道</a>       </p></td>
  </tr>
<tr>
<td colspan="2" align="left" valign="top">
<img src="images/Attractions_13.gif" width="275" height="28" alt=""></td>
</tr>
<tr>
<td colspan="9" align="left" valign="top">
<img src="images/Attractions_14.gif" width="1024" height="32" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Spacer.gif" width="144" height="1" alt=""></td>
<td>
<img src="images/Spacer.gif" width="131" height="1" alt=""></td>
<td>
<img src="images/Spacer.gif" width="379" height="1" alt=""></td>
<td>
<img src="images/Spacer.gif" width="67" height="1" alt=""></td>
<td>
<img src="images/Spacer.gif" width="61" height="1" alt=""></td>
<td>
<img src="images/Spacer.gif" width="63" height="1" alt=""></td>
<td>
<img src="images/Spacer.gif" width="62" height="1" alt=""></td>
<td>
<img src="images/Spacer.gif" width="62" height="1" alt=""></td>
<td>
<img src="images/Spacer.gif" width="55" height="1" alt=""></td>
</tr>
</table>

</body>
</html>

問什麼我的規劃路程會出不來...

作者: wmh 時間: 2010-5-4 23:51

你可能重新編排一下程式碼就會發現問題了...

作者: a29288279 時間: 2010-5-17 10:50

請問要如何改GOOGLE MAP上導航的交通方式!?
在程式馬上需要修改哪裡?
原本設定是在高速公路之類的
想設定成一般到路...

作者: wmh 時間: 2010-5-17 12:52

看看這是不是你要的：
http://code.google.com/intl/zh-T ... #GDirectionsOptions

avoidHighways: true

作者: a29288279 時間: 2010-5-18 19:21

交通方式
根據預設，導航的交通方式會假設為行車，不過您可以改設為其他交通方式，只要在呼叫 Directions.load() 方法時，傳送 GTravelMode 即可。系統支援下列交通方式：

G_TRAVEL_MODE_DRIVING 會使用道路網指出行車導航
G_TRAVEL_MODE_WALKING 要求步行導航，可通過人行道以及騎樓 (如果有的話)
注意：步行導航有時候可能不會顯示清楚的人行道路徑；因此，您必須在 GDirections 建構函式中提供 <div>，才會支援步行導航；在傳回的文字導航中 (每次轉彎都有指示)，會以 <div> 提醒使用者。如果沒有這個 <div>，步行導航的要求將會傳回錯誤。

我不太懂他的意思欸.....
我不知道要怎去寫怎去修改步行方式

作者: wmh 時間: 2010-5-18 22:25

你在使用 GDirections.load() 的時候，第二個參數可以多帶入 avoidHighways: true
這樣應該就避開高速公路了

作者: a29288279 時間: 2010-5-18 23:12

function onGDirectionsLoad(){
   // Use this function to access information about the latest load()
   // results.

   // e.g.
   // document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
   // and yada yada yada...
}

這邊修改嗎!?
我在這邊做修改還是沒辦法...

作者: wmh 時間: 2010-5-18 23:16

gdir.load("from: " + fromAddress + " to: " + toAddress, {"locale": locale, avoidHighways: true});

gdir 是你建立的 GDirections...

作者: a29288279 時間: 2010-5-19 00:22

嗯嗯!!
謝謝!!!!
我在研究研究

作者: s961234227 時間: 2010-7-22 14:02

我想請問一下
http://code.google.com/intl/zh-T ... ections-simple.html
這個範例左邊的那個路程指引
我要用原始檔的什麼程式碼才可放到Adobe Dreamweaver CS3裡面然後顯示在文字區域的表單裡面?

歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)