pCloud Partner Program

雙北Youbike租借站即時資訊地圖

程式技術/Javascript 2016/06/06 18:14
views: 62680 times
因為介紹 open data 與 google maps javascript sdk 的使用與實作 , 利用了台北市的 open data 與 新北市 的 open data 來進行雙北 Youbike 租借站即時資訊.

台北市的 Youbike 資料:
http://data.taipei/opendata/datalist/datasetMeta?oid=8ef1626a-892a-4218-8344-f7ac46e1aa48

新北市的 Youbike 資料:
http://data.ntpc.gov.tw/od/detail?oid=71CD1490-A2DF-4198-BEF1-318479775E8A

資料來源分別為(JSON type):
http://data.taipei/youbike
http://data.ntpc.gov.tw/od/data/api/54DDDC93-589C-4858-9C95-18B2046CC1FC?$format=json

其中台北市的資料 SERVER還有支援 CORS .

接下來就利用這些資料與 Google Maps Javascript SDK 來實作這個地圖了. 資料欄位都很容易理解, 其中使用不同顏色來表示租借站的狀態, 區分為可借可還 / 可借不可還 / 不可借可還 / 暫無營運, 而為能更容易借還, 目前可借為超過 2台, 可還也以超過 2個空位為基礎, 實際數字可點擊站點得知.

可以參考看看:
http://sample.diary.tw/youbike/
top

實做使用Google Maps API進行指定位置是否在指定區域內

程式技術/Javascript 2016/03/10 18:06
views: 35533 times
有個需求是要檢查某地址是否在某特定區域內, 於是思考使用 Google Maps API 來實做, 判斷的部分可以不需要 Google Maps 顯示, 但在測試或開發時, 若有可視的地圖會比較容易理解狀況, 也比較明白指定區域與指定位置的關係, 以下分為幾個部分來進行.

首先需要能繪製指定區域, 這個和程式沒有直接關係, 但透過 Google 的 MyMaps 比較好進行:
http://mymaps.google.com/

進入後, 建立新地圖, 出現 Google Maps 之後, 使用"畫一條線"的"新增內容或形狀"工具來進行區域的繪製:

用戶插入圖片

一點一點地把區域點好後, 點回起點, 就可以產生一個封閉區域了, 再給予命名, 如以下範例:
用戶插入圖片

這個部分可以隨時再進行區域的調整, 到自己滿意為止, 之後我們需要的其實是這個區域的多邊形座標點, 如何取得呢? 點擊新增圖層邊的三個點, 出現選單後, 選匯出成 KML:
用戶插入圖片

就可以取得對應的 KML 檔案了, 打開 KML 檔中, 最重要的是找到座標點, 內容會是這樣的文字:
<coordinates>121.5437222,25.0416515,0.0  ...... </coordinates>
這些座標點就是用來做這個指定區域的座標位置了, 接下來才真正要準備實作程式.

寫了一個小程式, 把這些座標點輸出成一串之後 Google Maps API Geometry 會用到的格式:
http://sample.diary.tw/36/tools.htm

我們將上面的 <coordinates> 中的字串, 填入上面小程式的 textarea 之後, 按下"產生區域多邊形座標", 就可以得到像是這樣的內容:
{lat: 25.0416515, lng:121.5437222},
{lat: 25.0333111, lng:121.543529},
.....

先準備好到這裡, 之後參考這個部分可以進行多邊形繪製:
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

可以看到其中會需要的陣列就由上面小程式產生的內容填入即可, 記得, 在參考 google maps 的範例程式時, 在 initMap 中, 有個 center 參數和 zoom 參數, 要填入實際上你地圖的位置附近, 不然不會出現在地圖上, 如 google maps 範例內, 是百幕達三角洲地帶, 而且 zoom 是 5, 若是以台北市來看, 大約 zomm 是在 15或16 左右.

如範例: http://sample.diary.tw/36/map1.htm

主要程式碼為:


接下來就是由指定的地址查找座標, 這個部分會用到 Google Maps API 中的 geocoder, 只需要將地址傳入, 就可以取得對應的座標了, 參考資料:
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingStatusCodes

程式碼不多, 參考範例:
http://sample.diary.tw/36/map2.htm
輸入地址就可以取得座標(經緯度)

主要程式碼如下(注意, geocoder 是用 callback 方式回傳):


最後就是利用一個很重要的判斷式來判斷某地址(已取得座標)是否在指定區域內, containsLocation() 參考: https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation

上面的範例是用點擊地圖的方式, 看點擊的位置是否在百幕達三角洲內, 是的話就是紅色 marker, 不是的話, 就用綠色 marker.

來改寫一下程式碼, 就可以達成判斷指定的地址是否在指定的區域內了, 如範例:
http://sample.diary.tw/36/map3.htm

主要程式碼:


總結一下:
1. 先製作指定區域座標陣列(多邊形用)
2. 使用 geocoder 取得指定的地址轉換為座標
3. 使用 google.maps.geometry.poly.containsLocation 來判斷2.是否在1.裡面

PS. 記得要先到 https://console.developers.google.com/ 建立一個可以使用 Google Maps API 的應用程式, 並建立對應的 browser key 放到上面的程式碼中, 以順利執行你的 web 應用程式.
top

Google Maps Style

程式技術 2015/07/28 17:17
views: 71470 times
Google Maps 大家很常用吧. 在做一些結合 Google Maps 的應用時, 有時會希望能把上面的圖示簡化, 或是一些圖示的顏色改變, 要如何進行呢?

可以使用 Google Maps API Styled Map Wizard: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

這個 Wizard 可以快速的開關與調整圖示的顯示與否與改變顏色, 設定好後, 再產生出 JSON 格式的描述檔, 就可以自訂 Sytle 的 Google Maps.

例如要所有的水都消失:

[ { "featureType": "water", "stylers": [ { "visibility": "off" } ] } ]

以此類推, 一方面預覽一方面快速產出對應的描述檔, 很快速地建立自訂的 Google Maps.

不過若是想要找一些現成的, 可以利用這個服務:
https://snazzymaps.com/

上面已經有現成的許多格式可供套出, 一樣是產生 JSON 格式的描述檔供應用.

需要更詳細的自訂Google Maps Style可以參考Google 的官方文件:
https://developers.google.com/maps/documentation/javascript/styling
top

Google Maps提供街景地圖了

WebTrend 2009/08/18 17:03
views: 55966 times
令人期待已久的 google maps 的 street view 已經上線了, 其實昨天在操作 google maps 就發現左上的那個小人已經蠢蠢欲動, 一下有顏色, 一下又變白, 原本以為可以用了, 後來又發現還不行, 不過今天證實可以用了.

這個功能相較於日本及美國, 台灣算比較晚推出, 不過相對於對兩者, 台灣也因為較晚推出, 所以拍出來的效果及細緻程度都高很多, 非常非常清晰, 流暢度也很好, 使用方式很簡單, 只要連上 google maps, 瀏覽時, 把左邊的小人(在變橘黃色的狀況下)拖出來, 就可以讓那個小人放在有變藍色的街道上看街景了.

來試看看吧: 台北市政府: link
用戶插入圖片


這個街道地圖的功能很強大, 方便未來在許多應用場合, 可供結合, 而且因為精細程度夠高, 所以效果也很好, 無論是找地址, 找地點, 甚至是不熟的地方, 利用這樣的呈現方式, 相信能讓不熟路況及不知道路的人有很好的參考依據.

但相信這個的建製成本也很重, 再加上提供這樣的服務, google 一樣也是免費, 他們未來想要做的, 相信是非常非常多的, 光是在 gps 上的結合或是應用, 就可以衍生出一堆, 更不用說和其他異業的結合及應用.

雖然目前還沒有全部的地圖都 support , 不過應該會慢慢地上線, 到時候, 小人能到的地方也就愈來愈多囉. 目前有支援的地區還只有大台北地區部分, 可以參考下面當小人飛入時的區域(變藍的地方):
用戶插入圖片



top

經緯度轉換(換算)(papago)

WebTrend 2009/07/28 12:52
views: 275471 times
這個是一個簡單的事啦. 只是 papago 只接受度分秒的方式輸入座標, 有點鳥, 因為有時要用十進位方式輸入或查詢, 所以需要做個小轉換.

其實公式不過就是這樣, 將度分秒(60進位)換成十進位, 公式很單純, 小學生也都會:

x度 y分 z秒 = x + y/60 + z/3600 度

也就是這一回事而已. 為了讓自己方便, 也讓大家方便, 乾脆做個小工具來操作好了, 注意, 是 WGS84 的格式, 若有其他格式, 請參考中研院線上轉換程式(也是線上直接算: http://webgis.sinica.edu.tw/cgi-tran/webtrans.htm)

另外也說明一下 google maps 可以接受的格式, 例如台北101的座標為: 25.033493, 121.564101, 用文字說明是

北緯 25.033493度, 東經 121.564101度,

用60進位則為

北緯 25度 2分 0.574799999999982秒, 東經 121度 33分 50.76359999997749秒

利用 google maps 的連結, 參數為 q 給定的方式, 根據這兩種格式都可以連到, 如下:
http://maps.google.com/?q=25.033493,121.564101
http://maps.google.com/?q=25 2 0.5748, 121 33 50.7636

這兩種方式, 連向的位置是完全一樣的, 當然前題是 google maps 也是用 WGS84 的格式.

sample 放到這裡: http://sample.diary.tw/18/maps.htm

用戶插入圖片


另外是 google maps 無法由瀏覽地圖直接查經緯度, 可以利用這個方便一點: http://www.mygeoposition.com/






top

google maps 名人地圖

WebTrend 2009/07/20 15:16
views: 44084 times
才寫完"時空的魅力" http://diary.tw/tim/800 這篇, google maps 又有新服務了, 與其說是新服務, 不如說是新應用.
 
google maps 上面, 若是多加了"名人"來加持一下, 相信會很有趣, 就是因為這樣的應用情境, 所以 google maps 把名人地圖搬上來的確很吸引人, 利用名人的推薦, google maps 的地圖空間概念, 整合起來, 可閱性的確高很多, 來看看如何操作:

首先連到: http://maps.google.com.tw/

再來連結下面有個"探索全球":
用戶插入圖片

再來就會出現"台灣台北"的這個預設地點(當然可以選其他國家的城市看看囉), 並且出現許多名人的介紹, 可以點擊看看有什麼好吃, 好玩的資訊, 右側的地圖就會出現囉, 例如隋棠, 用一個很有趣的名模標籤, 標示了一些隋棠的地圖, 這樣一來, 大家就可以按圖索驥去試看看囉.

這樣的一個應用, 真的好玩又有趣.

相關閱讀,
google news 相關新聞: http://news.google.com.tw/news/story?um=1&ned=tw&cf=all&ncl=dmqtVPOHEZmlIuMjzXBODh-Ye8XHM
Google名人地圖標記 從虛擬搬上現實 http://www.bnext.com.tw/FocusDay_2099

top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...