Where am I?-Part II-在 Google Maps 標記地圖資訊

在看過  Part I 部分,相信大部分人都可以了解如何完成一個 Firefox OS 地圖應用程式。在了解了地圖的基本應用之後,我也想要做一個簡單的程式。我想要完成一個可以在地圖上呈現更多資訊的地圖應用程式。除了顯示個人地理位置資訊,可以把我們感興趣的地圖資訊也呈現出來。

我們生活中常用的就是交通的資訊,以一個台北市民來說,可以使用微笑單車是很方便的事。不過在騎單車前可以了解目前附近單車的使用狀況會很有幫助。所以在這篇文章中,我希望可以以 Part I 中的地圖為基礎來開發一個應用去呈現台北市微笑單車即時資訊。

 

所以本篇文章會呈現的內容如下:

1. 微笑單車的即時資訊的取得及分析。

2. 在地圖上利用 Google Maps 提供的工具標示及顯示微笑單車使用情況。

目前台北市政府把微笑單車的即時資訊以 json 的格式對外公開,所以任何人都可以根據自已的需求來使用這些資訊。我們使用的方式就是從台北市政府抓到最新的資料,從中取出我們感興趣的內容。在微笑單車的資料中,我們需要知道單車站點的位置資訊及單車數量。在研究的過程中,我們知道資料中有提供站點資訊的英文訊息,所以也可以針對不是中文語係的裝置以英文來提供資訊。

我們需要的資料包含了 : sna, tot, sbi, lat, lng, ar, snaen, aren

首先需要從台北市的 opendata 中把 json 資料抓回來。

function httpGet(url) {
  xmlHttp = new XMLHttpRequest({mozSystem:true});
  xmlHttp.open( "GET", url, false );
  xmlHttp.send( null );
  return xmlHttp.responseText;
}

利用 JSON.parse 把傳回來的資料轉換成 javascript object 。就可以利用得到的資料去呈現在地圖上。

平常我在使用微笑單車時最關心的有下列訊息:

1. 附近有那些微笑單車站據點。

2. 那些據點還有車可以借,是不是有位置可以讓我們還車。

3. 為了一目了然用顏色來標示空車及空位的據點,可以更快讓使用者掌握情況。

4. 為了呈現即時的資訊,我們知道台北市是每五分鐘更新一次資料,所以我們也根據這項特性來更新我們地圖上的資訊。

一般我們在找附近的微笑單車的資訊時,最關心的是單車據點,可以很快知道有沒有車可以借,可以避免到達站點後才知道沒有車或是需要點開詳細資訊才知道。我們可以設定三種顏色來分別最簡單的站點資訊 – 沒有車 ( 橘色 ),有車有位 ( 綠色 ) 及 沒有車位 ( 紅色 ) 。

2014-12-18 18:49:53 的螢幕擷圖

站點位置可以用 lat 及 lng 在 Google Maps 上以 marker 的方式標式出來。為了讓使用者可以了解更細節的資訊,在使用者在 marker 上點選之後,可以了解站點名稱 ( sna ) , 站點位置 ( ar  ), 單車數 ( sbi ),  空位數 ( tot – sbi )。

2014-12-18 15:23:28 的螢幕擷圖

英文的資訊可以用 snaen 及 aren 來根據 navigator.language 調整去呈現中文以外的資訊。

2014-12-18 15:28:43 的螢幕擷圖

 

latlng = new google.maps.LatLng(retVal[i].lat, retVal[i].lng);
      var image = okImage;
      if ( retVal[i].sbi == 0 ) {
        image = emptyImage;
      } else if ( (retVal[i].tot-retVal[i].sbi) == 0 ) {
        image = fullImage;
      }

      var marker = new google.maps.Marker({
           position: latlng,
           map: map,
           icon: image,
           shadow: pinShadow,
           //animation: google.maps.Animation.DROP,
           title: infoTitle
      });

 

最後為了呈現最即時的資訊,可以利用 javascript 的 setTimeout 來定期每五分鐘更新一次地圖上的標示及站點資訊。

setTimeout(function() {
    updateMap(map);
  }, 5 * 60 * 1000); // update the ubike information every 5 minutes.

相信在這樣的簡單說明下,大家對於這樣的地圖有了進一步的認識。等待大家來開發更多更棒的應用。

 

參考:

1. Where am I? – Part I – 使用 Google Maps 地圖快速簡單查看你的位置

2. 台北市政府的開放資料

0 則回應

js13kGames:遊戲開發專屬的 Code Golf js13kGames:遊戲開發專屬的 Code Golf 1 年前
用 JavaScript 錯誤訊息協助 Web 開發者 用 JavaScript 錯誤訊息協助 Web 開發者 1 年前
運用 Web 技術打造電視遙控器的操作環境 運用 Web 技術打造電視遙控器的操作環境 1 年前
在 Firefox 上建構 WebVR 在 Firefox 上建構 WebVR 1 年前
免 Flash 實作的 Web 剪貼簿 免 Flash 實作的 Web 剪貼簿 2 年前
淺談 W3C Sensor API的發展 淺談 W3C Sensor API的發展 2 年前

熱門文章

最新消息