pCloud Partner Program

Google Static Maps地圖實作

程式技術 2016/03/22 18:10
views: 38431 times
Google Static Maps地圖是用在取得地圖資訊時, 最輕量的使用方式, 之前文章: http://diary.tw/tim/1141 使用的 Google Maps Javascript API 需要引入 javascript library 進行程式操作, 在 Google Static Maps 則僅需要用到 img src 的方式取得圖片即可.

雖然只有圖片, 但是功能還是很強大, 而且應用在低階或網路環境不好的地方特別有用, 尤其是和地圖不互動的狀況下, 只是呈現結果的應用情境, 使用 Google Static Maps 是非常方便好用的.

Google Static Maps 資料可以參考官方網站:
https://developers.google.com/maps/documentation/static-maps/intro

記得一樣要先申請 Google API Key 來使用, 這裡用的就是 Google Static Maps API:
用戶插入圖片

取得 API Key 之後, 就可以來應用了. 基本型如下:

https://maps.googleapis.com/maps/api/staticmap?parameters

其中 parameters 就是要繪製地圖的參數了, 以在地圖上某一地點畫一個座標為例,

https://maps.googleapis.com/maps/api/staticmap?center=25.052019,121.513987&zoom=15&size=320x240&language=zh-TW&maptype=roadmap&markers=color:red|label:A|25.052019,121.513987&key=[your api key]

其中 center 為地圖中心點, zoom 為放大層級, 以台北市為例, 15級或16級都OK, 看應用的狀況, size 為產出的圖片尺寸, 而 language 為地圖的語系, maptype 為地圖的格式, roadmap 為街道地圖(另有 satellite, terrain, hybrid), markers 為要標註的位置, 其中 color 為顏色, 用 | (pipe符號)區隔 marker 的參數, label 為單英數字標籤, 最後則是位置, 再來是最重要的 key 就是要輸入你的 api key, 效果如下:



這個地圖不能互動, 不過可以呈現所需要的資訊, 十分方便, 另外若是希望自訂 marker 的 icon, 可以將 markers 參數改為 icon:[url]|[position]的方式即可, 如下:

markers=icon:http://maps.google.com/mapfiles/kml/shapes/schools_maps.png|25.052019,121.513987

以上圖放到地圖中的效果如下:



另外, 若是想要畫出區域圖, 也可以用這個 Google Static Maps, 以之前文章 (http://diary.tw/tim/1141)為例, 座標點如下:
    {lat: 25.0416515, lng:121.5437222}, 
    {lat: 25.0333111, lng:121.543529}, 
    {lat: 25.033116700000004, lng:121.5526271}, 
    {lat: 25.036052399999996, lng:121.55267000000002}, 
    {lat: 25.0374716, lng:121.55146840000002}, 
    {lat: 25.038016, lng:121.5513396}, 
    {lat: 25.0415348, lng:121.5474987}, 
    {lat: 25.0416515, lng:121.5437222}

使用的參數就是 path, 語法如下,

path=pathStyles|pathLocation1|pathLocation2|... etc.

其中 pathStyles 有 wight, color, fillcolor, geodesic 4種參數, 其中 color 與 fillcolor 都是用 0xRRGGBBAA 其中 AA 由 00(不透明)到 FF(全透明) 這樣設定即可.

可以參考: https://developers.google.com/maps/documentation/static-maps/intro#Paths

產生的結果如下:



程式碼如下:
https://maps.googleapis.com/maps/api/staticmap?center=25.037789,121.547375&zoom=15&size=360x360&language=zh-TW&maptype=roadmap&path=color:0xFF0000|fillcolor:0xFF000033|25.0416515,121.5437222|25.0333111,121.543529|25.033116700000004,121.5526271|25.036052399999996,121.55267000000002|25.0374716,121.55146840000002|25.038016,121.5513396|25.0415348,121.5474987|25.0416515,121.5437222&key=[your api key]

十分好用, 但要注意不要超過 url 網址的長度上限, 參考舊文: http://diary.tw/tim/64, 在文件內說明也有, 不要超過 2048bytes: https://developers.google.com/maps/documentation/static-maps/intro#url-size-restriction

另外, 這組 API 每日免費上限為 25,000, 若要更多可以付費方式使用.

[2016/4/20 10:15]
補充一下自訂 marker 的部分, 必須是用 http 而非 https 的方式, 否則將無法正常輸出該自訂 marker, 參考資料:
http://stackoverflow.com/questions/12324996/custom-marker-icon-not-showing-google-static-maps-v2
top

WEB版Google地圖街景導航

好用軟體 2011/07/07 18:15
views: 137801 times
這個是個蠻好玩的應用, 由於全台的街景服務已經有蠻大的覆蓋率了, 所以用這樣的方式來模擬導航駕駛, 相信會讓不熟地址路況的人更容易上路.

這個算是整合 google maps api 出來的一個應用, 網址在:

http://gmaps-samples.googlecode.com/svn/trunk/streetview/streetview_directions.html

進來之後, 其實也就是簡單地輸入出發地地址, 目的地地址就可以按下 route 產生導航, 並利用 drive 按鈕來模擬駕駛的街景.

例如輸入台北市政府到總統府地址, 台北市市府路1號, 台北市重慶南路一段122號, 按下 route 後, 產生如下畫面:

用戶插入圖片

接下來可以點 driver 或是右下的導航點, 都可以更新上方的街景到所在位置, 也可以直接操作上方的街景, 來進行前後移動(如原來的 street view一樣的操作方式), 這樣就可以模擬了.

嫌開的速度太慢? 可以調整一下 speed 到 fast 會快一點, 不過這個導航是個安全駕駛, 所以即使是 fast 也還是很慢!
top

Google Maps的圖資

好用軟體 2010/07/16 12:46
views: 181998 times
Google Maps, 一直是我很愛的工具, 因為什麼都能找, 幾乎都找得到, 再加上 web 2.0 的功能, 使用者照片, 資訊提供等, 整個就是一個地圖 wiki, 很棒.

今天在用的時候, 發現下方有個圖資提供 KingWay, 就是圖資的提供公司, (當然, 這是台灣的部分), 其他國家還有其他國家的圖資提供者, 而且好玩的是在不同的放大比例時, 顯示的地圖圖資來源也會不同, 簡單地說, Google 和其他圖資商購買圖資供應用, 而在放大不同比例下有不同圖資提供商的地圖來源, 在跨國地區時, 也會有跨國地區的圖資商出現, 很有意思, 以下是幾個擷圖來說明:

1. 在台灣, 應該都是 KingWay:
用戶插入圖片

2. 縮小一點來看: 除了 Kingway 外, 還有 Mapabc, Tele Atlas, ZENRIN 等.
用戶插入圖片

3. 相同比例換成空照時, 就是 TerraMetrics:
用戶插入圖片


4. 縮得更小時, 全球地圖只有 google 耶.
用戶插入圖片

讀者可以自行試著玩看看, google maps 的圖資來源很多, 在不同的地理位置, 會有不同的資訊提供者, 非常有意思. 這裡有 google 地圖的服務條款: http://www.google.com/intl/zh-TW_tw/help/terms_maps.html


top
TAG Google, maps

從Google Maps找經緯度

好用軟體 2009/06/05 23:34
views: 98569 times
之前在使用 Google Maps 時, 有找到地點了, 但要找出經緯度給導航軟體時, 需要經緯度這個資訊, 不過從 Google Maps 上的預設功能並沒有辦法將經緯度取出來. (雖然一定有什麼方式).

不過今天發現有個好方便的網站(http://www.mygeoposition.com/), 可以將這個功能, 預設就是列出來經緯度, 所以十分方便(我指的方便是有了經緯度後, 輸入導航軟體這回事), 而且預設就會列出兩種經緯度, 有十分位方式及度分秒方式, 如下圖:

用戶插入圖片
所以如上圖, 會有北緯 25.047727度, 東經 121.517399 度, 用度分秒來看是北緯 25度2分51.82秒, 東經 121度31分2.64秒的詳細資訊. 移動地圖, 單擊地圖時, 又會再給定一樣的資訊, 這樣對於要出去玩的時候, 定位座標很有用.

當然, 這個網站的功能還不只這些, 還可以利用 "Link this map" 頁籤, 把這個網站, Google maps, Microsoft Local, Yahoo Maps 的連結都整理出來, 也方便使用者自己使用, 很不錯又整理得很好的功能, 大家可以用看看.
top
TAG Google, gps, maps




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


 Waiting...