喜歡到各地旅行的人,又愛寫部落格分享的人,

總是想要將自己的足跡顯示在地圖上,一方面自己看著就覺得很有成就感,一方面也想讓人羨慕一下

但像我旅遊的國家這麼少的人,就可用來提醒自己還有個環遊世界的夢想

還可以讓朋友知道那些國家我沒去過,要出去玩就會call我....(謎之音...這只是你的幻想吧QQ)

偶然間,發現個網站http://douweosinga.com/projects/visited?region=world

進入後,依以下圖片順序選擇曾經訪問過的國家

visit  

這是我完成後的世界地圖

嗚..好慘...世界還是處在戰爭迷霧的狀態下....都還沒開過地圖QQ

捧有阿!!艾濟ㄟ崔挖出迄憩淘啦~~~~

接下來回到痞客邦管理後台(或其他部落格)

選擇側邊欄位設定->新增欄位

visit2  

接下來出現以下畫面後,將剛剛複製的網址貼上

 visit3   

其中紅色部分的程式預設尺寸是450x300(全世界圖,其他各圖的預設都不相同),以我的電腦設定是189x126看來最適合,所以width部分改為189,height部分改126

而藍色部分的程式預設是連回該網站的連結,鑒於尊重作者,同學們就不要改太大了

懂html的同學就請自行設定其他欄位了

選擇送出就,回到管理後台,將新增的欄位拖曳到側欄(如有設定欄位2的人,也可放在欄位2)

visit4  

回到部落格,就可看到visit map出現在側欄上了

visit5  

 

-------我是分隔線------

同學們應該都可以從程式裡面看出這是原作者使用Google Chart裡面的Geochart做出來的應用

Google Chart的官方網站與說明https://developers.google.com/chart/interactive/docs/gallery/geochart

網址內我目前拆解出以下的控制選項(我上次寫HTML已經是15年前的事了QQ那時我還只會用小作家編寫html語言...)

以下內容歡迎高手指點,我還沒try出來

<img src="http://chart.apis.google.com/chart?         //這是Google Chart程式的網址

cht=t&amp;                                  //這是設定地圖種類, 如果cht=map是全球地圖,後面加fix的控制碼,可以固定區域與角度

chtm=asia&amp;                           //chtm=可接小地圖或是代碼,從官方網站內可以得到各地代碼

chs=440x220&amp;                      //這是設定小地圖的尺寸,但我調超過此大小就失效,還要測試
chf=bg,s,336699&amp;                 //bg設定背景顏色, s設定數值的顏色
chco=d0d0d0,cc0000&amp;           //應該是設定國家的顏色
chd=s:999999&amp;                    //chco的參數
chld=KH|CN|JP|TH|TW|KR"            //國家別代碼,詳細代碼表可從官方網站得到

alt="" width="600">                     //大圖尺寸

Google Chart Api的中文化在http://www.haijd.net/archive/computer/google/google_chart_api/api.html 

可以找到更多控制選項,目前還沒試出來,也請高手多加指導

有部分國家可以精細到"省",如美國,但其他國家還要嘗試,沒有套用到所有國家之上

去過的國家顏色也可以調,應該也可以依去過的次數或天數用不同顏色呈現,應該不難,但還沒試出來

如有更新發展,日後再行補充

--------2014/1/15更新--------

原來辜狗大神自己就有寫了網頁控制碼說明,真是讓人一頓好找....

https://developers.google.com/chart/image/docs/gallery/new_map_charts?hl=zh-TW

http://chart.apis.google.com/chart?cht=map:fixed=-70,180,80,180&chs=600x350&chld=TW|TH|CN-44|CN-35|JP|GB|NZ|HK|KR|AT|HU|KH|CN-11|CN-34|CN-51|CN-62|CN-61|CN-53|CN-31|FR|DE|US-UT&chco=B3BCC0|FF0000|FF0000|FF0000|FF0000|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|FFC726|ff9900|ff9900|ff9900

只會用最笨的作法做了上述足跡地圖... 

區分為紅色long stay, 藍色 travel, 橘色 business trip

國家碼在此,大家可以好好玩一下http://en.wikipedia.org/wiki/ISO_3166-2

256 safety color codes: http://www.colorhexa.com/web-safe-colors

要在更進一步的話,就得使用Jave另寫了

 

------------2017/12/19更新世界地圖----------------

undefined

http://chart.apis.google.com/chart?cht=map:fixed=-70,180,80,180&chs=600x350&chld=TW|TH|CN-44|CN-35|JP|GB|NZ|HK|KR|AT|HU|KH|CN-11|CN-34|CN-51|CN-62|CN-61|CN-53|CZ|GR|IS|CN-31|FR|DE|US-UT&chco=B3BCC0|FF0000|FF0000|FF0000|FF0000|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|4444FF|FFC726|ff9900|ff9900|ff9900

arrow
arrow

    嘯蒼森二郎 發表在 痞客邦 留言(3) 人氣()