三月 11

Google Maps API運用經驗

因公司內幾台車頭有安裝GPS定位的設備，就來玩看看Google Maps API，能不能協助讓我更輕易的掌握各台車頭的行蹤:P

該設備回傳到資料庫的定位格式為WGS84經緯度(E/N)，為順利套用到GMap，需先轉為WGS84 TM2座標。

換算方式
E = 12047.883 = 120 + (47.883/60)
N = 2435.245 = 24 + (35.245/60)
得
X = 120.79805
Y = 24.587416666667

※ 使用Google Maps API的網頁編碼需為UTF-8（若使用BIG5編碼，於IE會無法顯示，原因不明）

網頁開頭宣告DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

在head內引入Google Maps API的Javascript檔，此處將以v2版為例。
key值請前往Sign Up for the Google Maps API申請即可。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAQfRFdSPVX2zgzzcm-u8wzhR73b70vbYnqlQzPoG6vMTmUQULnBR4BZoRIhZ47CWMvpmgGocSL8S51A" type="text/javascript"></script>

為避免瀏覽器尚未載入API就先跑Script造成錯誤，需於body內設定onload，另於離開時呼叫GUnload()釋放記憶體。

<body onload="initialize()" onunload="GUnload()">

增加地圖顯示的圖層，可隨意指定大小。

<div id="map" style="width:100%;height:500px;margin:0 auto;">

接下來就是主角上場...

<script type="text/javascript">
function initialize() {
  // 檢查瀏覽器是否可正確執行
  if (GBrowserIsCompatible()) {
    // 指定GMap使用的圖層
    var map = new GMap2(document.getElementById("map"));
   
    // 地圖控制列
    map.addControl(new GLargeMapControl()); // 左側控制列
    map.addControl(new GMapTypeControl()); // 右上控制列
   
    // 座標
    var point = new GLatLng(24.587416666667, 120.79805);
    // 座標x/y於API v1/v2的擺放位址是相反的
    map.setCenter(point, 13); // 放大倍率

    // 自訂圖標
    var TruckIcon = new GIcon(G_DEFAULT_ICON);
    TruckIcon.image = "./truck.png";
    // 自訂圖標大小
    TruckIcon.iconSize = new GSize(32, 22);
          markerOptions = { icon:TruckIcon };
   
    // 設定座標點使用自訂圖標
    var marker = new GMarker(point, markerOptions);
    map.addOverlay(marker);
   
    // 訊息
    map.openInfoWindow(map.getCenter(), document.createTextNode("顯示於地圖中央的訊息"));
       
    // 行車軌跡、顏色、線粗細設定（可定義多個座標點）
    var polyline = new GPolyline([new GLatLng(24.524333333333,120.726366666667),
                                   new GLatLng(24.528066666667,120.729766666667),
                                   new GLatLng(24.531316666667,120.733283333333),
                                   new GLatLng(24.534733333333,120.73665),
                                   new GLatLng(24.538466666667,120.739483333333),
                                   new GLatLng(24.542083333333,120.741733333333),
                                   new GLatLng(24.5458,120.74395),
                                   new GLatLng(24.5495,120.746433333333),
                                   new GLatLng(24.5529,120.749216666667)
                                  ], "#ff0000", 6);
    map.addOverlay(polyline);
  } else {
    alert("您的瀏覽器不支援Google Maps！！");
  }
}
</script>

※ 以上方式可適用於Firefox/Opera/IE6等...主流瀏覽器，IE5.5還是不行...但應該很少人使用IE5.5了吧=_=\

按此瀏覽Google Maps API測試網頁

標籤: , , , ,

03-11 20:20@ 網頁設計 | 回應 | | 隱藏資訊列將Google Maps API運用經驗加入HEMiDEMi書籤 將Google Maps API運用經驗加入del.icio.us書籤 將Google Maps API運用經驗加入MyShare書籤

回應 ( 發表您的回應 )

  1. 1
    由 黃廷宇 於 2008-04-03 00:10:56 發表:

    請問學長海洋資供大學入學面是歷屆都問些什麼問題呢煩請盡快E-MAIL給我參考 還有注意細節好嗎非常謝謝

  2. 2
    由 Kai 於 2008-04-03 11:15:42 發表:

    我不是海大的-o-y~~

  3. 3
    由 mark 於 2008-04-24 02:08:47 發表:

    我最近公司也有個案子也是類似這方面需求，使用PDA用3G將GPS資料傳回SERVER端，...可是有個缺點，太耗電啦，不知道你對這方面的有沒有甚麼建議?!

  4. 4
    由 Kai 於 2008-04-24 11:42:46 發表:

    耗電...那就弄個車充吧XD
    我們公司是配合這家廠商，每一個車機需搭配一個門號
    http://www.chitc.com.tw/

  5. 5
    由 blue 於 2008-05-02 20:17:29 發表:

    不好意思我看你的程式好像是把經緯度的地方寫死了？
    new GLatLng(24.524333333333,120.726366666667),<---這個
    要如何能隨時得知正在跑的車子所傳回的位置呢？

  6. 6
    由 Kai 於 2008-05-02 21:15:47 發表:

    經緯度那一段我是用php傳回後秀出的，只是sample沒用php...XD
    只是簡單的foreach迴圈而已。

  7. 7
    由 blue 於 2008-05-03 13:19:46 發表:

    恩恩~那您是怎麼把經緯度寫進去php的資料庫阿？用comport去接收？

  8. 8
    由 Kai 於 2008-05-04 18:52:20 發表:

    取得經緯度→資料庫的部份是配合廠商負責，就不太清楚了（回應.4）
    該廠商是使用MSSQL，我是撈資料出來處理過後再insert到MySQL

  9. 9
    由 mr.t 於 2008-05-04 21:58:03 發表:

    請問一下!你適用啥方法讓PDA回傳的?
    還有可以跟你聯絡媽?
    我是XX科大的學生!
    想在請教你一些問題

  10. 10
    由 Kai 於 2008-05-05 11:17:54 發表:

    樓上，我不是用PDA回傳的...:P

  11. 11
    由 blue 於 2008-05-24 15:31:16 發表:

    請問一下~您的經緯度是不斷的回傳？那程式不就一直在跑抓到資料再傳給代表汽車的那個註記再改變位置，那這樣其他部分的功能是不是就做不到了？例如在汽車移動的過程中，加上其他的事件，例如下一般的地點註記

  12. 12
    由 Kai 於 2008-05-25 13:38:26 發表:

    經緯度由車機不斷回傳（約30秒），只要抓取最後一筆資料（目前位置）及數筆歷史資料（描繪行車軌跡），同時間也是可以加註其他事件、目的地，或其他車子的位置及軌跡，只是開啟會稍慢些...（需借力Ajax）。

  13. 13
    由 blueghost 於 2008-05-28 12:55:46 發表:

    怎麼從車機取得經緯度資訊以及利用3g回傳到該公司的mssql
    所有秘密都在那黑色盒子裡面,但應該都是廠商的商業機密
    破解了就沒價值了,不過定時從mssql撈資料出來存至mysql
    結合Gmaps api呈現出來
    至少檢視的人不用安裝軟體,又跨平台
    這樣子的玩法感覺還不賴~~

    想請問一下除了經緯度資訊之外還有其他資訊嗎
    如車速或是地面高度之類的也有寫入mssql嗎?

  14. 14
    由 Kai 於 2008-05-28 17:07:13 發表:

    目前沒看到地面高度的欄位
    車速到是有，不過一樣是神秘黑盒子丟回來的。XD

  15. 15
    由 馬小克 於 2008-06-25 17:27:31 發表:

    BIG5編碼要使用Google的API,可以在

    加上隱藏的參數 &oe=big5

    結果如下：

    其它語系應該也可以這樣用

  16. 16
    由 晴天 於 2008-07-10 11:52:23 發表:

    請問您
    貴公司裝這樣一套系統，花費多少呢?

  17. 17
    由 Kai 於 2008-07-10 13:39:22 發表:

    Server端的軟/硬體費用67萬
    車機每台1200
    不含Client端設備及線路費

  18. 18
    由 [Google Map]我的第一張地圖 | Horn Network 於 2008-07-10 18:19:10 發表:

    [...] Google Maps API運用經驗 | Kai@Orz.tw [...]

  19. 19
    由 name 於 2008-07-28 03:57:18 發表:

    Really nice=)but look this:,

  20. 20
    由 施朝云 於 2010-06-07 16:22:10 發表:

    我正在做一个GPS的WEB版的定位，要求很简单，指定的车辆必须在指定的路上行驶，否则报警提示。一开始以为很简单，看到你的文章，好像我还有很长一段路要走啊
    线是由点组成，比如一条弯曲的道路，我根本不知道它需要多少个点来做折线，如果知道的话，我所遇到的问题就没什么难额了，我想知道多些关于你说的厂方数据的事
    MSN：yangzhouscy@hotail.com

錯誤訊息

留言回應

自由不是離開某套軟體、某種系統，而是找到自由。