Dogen's Photo Life

如何在 google map 上加上 flickr 照片

我想長期接觸網路的使用者，會有想把平常生活的一些照片po到網路上，會想把照片分享給朋友，甚至還順便加上當天出去旅遊的路徑。這時候該如何去設定呢？

簡單的想法應該是把圖片加上位置標註，然後配合地圖，最後可以在地圖上顯示照片在地圖上的位置。而在照片上加上位置標註（經緯度）的動作就是 Geotagging 。

正確來說是將地理資料(例如經緯度)加入各種媒體，例如相片、影片、網誌，將內容定位在地圖上的一種方式。換句話說，幫照片加上標籤（tag），讓 Google maps、Urmap、Yahoo map等網路地圖服務，能知道你照片照相的位置。

而大多數的人都喜歡把照片上傳到 Flickr 、 Picasa 、 Panoramio 等網路相簿。

（點上圖可直接觀賞效果）

可從上圖看到我把我去奮起湖騎單車的照片丟到 Flickr ，再把圖片放在 Google maps

同時還把騎單車的路線圖一同顯示出來，這樣的呈現方式是不是吸引人阿！！

基本上要讓 Flickr 知道照片的座標有三種方式：

透過 Flickr 的 Organizr，以拖拉的方式將照片和本身Yahoo map 結合。教學：請參考
自行標上照片的經緯度。教學：請參考
透過 Picasa 圖片軟體和 Google earth 的連動功能加註座標。教學：請參考說明：請參考

當然本身我比較喜歡第一種跟第二種方式，因為他很直覺是的去把照片移到自己確定的地圖位置上。

基本上有很多種方式與方法達成最上圖的效果，但是如果有像我一樣特別喜歡把圖片放在 Flickr 這種大容量的網路相簿，同時還沒錢買那種GPS軌跡記錄器的朋友，或者你的相機本身沒有支援紀錄 GPS ，可以依照我以下所分享的方式來達到效果。

首先當然是把圖片上傳到 Flickr ，當然有很多種上傳的方式，不過豆漿想推薦一個軟體，那就是 Friendly.Flickr ，作者本身就是為了方便修改 Flickr 的標籤、權限、座標、相片集、群組所開發的軟體，還有許多功能可參考作者站內分享的一些教學與技巧。

步驟一

由於我們先天條件照片上沒有座標，所以要執行 Geotagging 動作，基本上可以用第一種方法設定

豆漿分享一個最簡單方便的網站服務 Geophotoshow

請先點入網頁，在操作前請先登入 Flickr

操作順序如下圖：

然後看圖說故事，結束~快吧!XD

這樣基本上所有照片設定好都已經做好設定座標的動作了

步驟二

基本上你可以在flickr的管理中的地圖選項，應該可以看到你的照片位置。

如果有沒設定好得也可以直接在管理中點選照片兩下直接在位置選項編輯如下圖

可以看到圖片內有緯度跟經度可設定。

但是這不是我們所要得結果，接下來要做的是把在地圖上的同樣相片集內的照片做成一個kml或kmz檔。

步驟三

再來要利用 Flickr Photo Set to KML 來產生kml、kmz 檔

請在網頁填入你相簿集的號碼，直接點送出查詢即可，他會產生你相簿集內所有有設定座標照片的kml或kmz檔

步驟四

再來請到你的 Google maps 點選我的地圖，再點選建立新地圖如下圖

最後匯入kml檔案

這樣大致上算已經完成，匯入完成應該就看得到效果了，再來如果還想配合加入路線圖的話

等我有空再說XD。

看一下效果吧！

在較大的地圖上查看980506阿里山奮起湖單車之旅

這邊提供的方法是我覺得算全部都盡量在 Flickr 官網上操作就可以了，不用跑太多網頁，而且操作容易，同時有個蠻重要的考慮因素，那就是要考量到不同瀏覽器，不然如果是 firefox 的使用者，可以直接利用GMiF,URMap Plus等Firefox的Greasemonkey script來加速標記地點的流程，當然對於不是很瞭解這方面知識的人是一個非常麻煩的方式。如果單純想看看區域內別人的照片，可以利用這個 earthalbum 來尋找你想去的地方，即時瞭解當地的景色與位置，也是不錯的選擇。

info:

如何將flickr相片正確的geotag在google earth或google map的台灣地圖上

[Flickr] 在 Google Earth 和 Google Maps 上瀏覽 Flickr 的相片

轉載原創文章請註明：文章轉載自：moki’s 5 sense [http://dogen.twbbs.org]
本文標題：如何在 google map 上加上 flickr 照片
本文網址：http://dogen.twbbs.org/?p=245

[+/-] 繼續閱讀...

如何讓自己的部落格有光箱效果（Lightbox）與 Wordpress 、 Blogger 結合

豆漿先前在這篇有使用紀錄，我想用這篇文章筆記自己使用 Lightbox 這個光箱外掛的心得，。

什麼是 Lightbox？

它其實是一種在blog展示自己圖片特效的 JavaScript 程式，在網路上可以看到許多應用與教學。

還是不知道是什麼東西，直接點擊下面的圖：

在部落格上是顯示小圖，不過點擊後會顯示大的圖檔，而呈現光箱（ Lightbox ）的效果，由於它檔案不大執行效率也不錯，在寫文章時候只要插入小圖，這樣多少能減少載入網頁的時間，所以在網路上非常受到部落客的喜愛，同時在 Wordpress 也有相關的 Plugin 外掛。

如果是blogger、pixnet等可以使用插件或網頁元素執行html、 JavaScript 程式的BSP，則適用以下方式：

豆漿不寫教學，由於網路很多前輩分享過了，如果懶得找，豆漿提供幾個供參考，當然自己也作紀錄。

良人的大秘寶 » 在Blogger Beta使用Lightbox顯示圖片

靖.技場 » Lightbox JS --- 光箱特效使用教學

swf.com.tw » 使用LightBox展示線上影像

JH2 » [網頁特效小偏方] Lightbox圖片展示 (疑難雜症)

需要注意的地方

如果下載下來的檔案，上傳到自己空間，在部落格<head></head>中設定的路徑要正確，並且注意設定lightbox.js及lightbox.css這兩個文件中所有的圖片路徑。不然Lightbox就會有缺圖或無效等情況發生。

如果用別人空間要小心注意，因為可能流量太大或者檔案不見，導致自己部落格讀不到js、css，或讀比較慢，最後Lightbox的效果無法展示，這時候就尷尬了。

還有Lightbox需要等完整載入後，再點圖片才能顯現效果，不然會直接連結到圖片原始網頁。

以上是我在使用過程遇到的問題。

如果是使用Wordpress 的部落客，則可以使用下列三個Plugins：

jQuery Lightbox

Lightbox-2

lightbox-2-wordpress-plugin

如果還不夠可以參考這篇有其他類似功能的外掛。

使用心得可以參考Sinchen大寫得這篇WordPress 推薦Lightbox外掛jQuery Lightbox Plus。

個人是使用Lightbox-2，可以在moki’s首頁右邊看到我同時結合flickrrss這個Plugin的效果（關於flickrrss這個使用心得容許我下次寫了），使用這個Plugin最主要原因是因為它有個auto-lightboxing’ of image links的功能，它自動幫你把圖片組合成為以連續性的光箱式的展示，也就是你目前所在頁面所有圖片作連續光箱展示。

教學部份很簡單（其實我自己也非常懶得再貼圖了）

1.將下載回來的檔案解壓縮。

2.上傳到 /wp-content/plugins/下的資料夾。

3.在後台啟動外掛即可。

4.在插件設置頁勾選Auto-lightbox image links。

4.最後在自己在插入的小圖設置連結到原始圖。

至於有個不用插小圖的小技巧：

在黑白天空網站這篇寫到