Google Streetview Service API

Google Streetview Service API 可以做很多有趣的應用，但會有一些門檻。(免費使用每天上限25,000次地圖)




首先，最簡單的招式連Google Streetview Service API都還不必搞懂，最快的做法就用Google Street View Image API(現在需要 申請API Key才能使用此功能)，只要設定超連結到https://maps.googleapis.com/maps/api/streetview?size=寬x高&location=經緯度座標&heading=方位角&pitch=仰俯角&key=你的金鑰，就能得到一張指定地點角度的街景照片圖檔。



先以 Street View Containers 的 example (程式備份jsfiddle、jsbin) 解說地圖與街景物件語法，要先了解Streetview是依附在Map之基礎上，所以在範例中產生一個Map物件及一個Streetview物件，並分別指定各一個div來放置，然後透過setStreetView()來讓它們連動。再進一步了解 Street View Events 的 example (程式備份jsfiddle、jsbin) 呈現的pano_changed、position_changed、pov_changed、links_changed這些參數，然後就可以開始練習下列的例子...

在Google推出街景服務之後，官方部落格文章在2012年提到有兩個平台使用街景做出很有意思的應用，其中一個是Historypin將舊照片疊在街景上讓人們對於歷史照片所在位置有更具體的認識，另外一個是俠盜獵車手4電玩採用真實的街景為遊戲場景。

對於Historypin這樣的應用，後來還有類似的做法：Halley Docherty將名畫與google街景混搭、從Google街景來看經典專輯封面。要做出這樣的效果很難嗎?可以說是，也可以說不是! 如果我們一直從找看看要如何寫出程式能達成類似效果，好像是無解耶! 但是，我們找到了這個例子 - Street View Overlay Demo (程式備份jsfiddle、jsbin)，不必完全看懂這個程式，只要能把關鍵的地方改一改，就能用來把照片疊在街景上。在課堂上進行下列步驟的實驗：

• 先查看前述Demo程式的原始碼，並將其複製存到我們的電腦上。

• 從Demo程式的原始碼看到其引用了一個 streetviewoverlay.js ，所以也要下載回來在同一個資料夾。而這個 js 原始碼裡面有設定 this.image 為其使用的圖檔，這可以改成我們自己享用的圖片。

• 要搞懂其他參數之設定意義，先參考Street View Events的example，然後也是將example程式碼複製存到我們的電腦上，改變地點座標值並再測試看看，譬如在jsfiddle、jsbin的示範(若在output區無法看見執行結果，應是瀏覽器對指令碼的阻擋，可點擊網址列上的封鎖圖示允許其載入不安全的指令碼)，應該就能了解各參數之意義。

• 課堂上會教大家如何利用上述的街景疊合照片程式去改變一些參數，譬如在jsfiddle、jsbin的示範(若在output區無法看見執行結果，應是瀏覽器對指令碼的阻擋，可點擊網址列上的封鎖圖示允許其載入不安全的指令碼)。自己改寫好的程式要在網路上能分享給別人看到就存在jsfiddle.net平台或Google雲端硬碟，再以jsfiddle平台上的share方式或Google雲端硬碟特定網址格式將分享出去，而如果是要嵌入其他像是部落格平台上，就要用iframe語法 ( 譬如: jsfiddle.net平台的share方式有提供embed語法如: <iframe width="100%" height="300" src="//jsfiddle.net/jz32fas8/embedded/result" allowfullscreen="allowfullscreen" frameborder="0"></iframe> )。

• 更進一步應該試著改寫成可接收網址參數來決定要呈現的地點與疊圖。(會需要用到下列函式)

   // 有多少參數要接收就做多少次  
   var 變數 = GetUrlVar('參數名');  
   //  
   // 取得網址裡的參數   
   function GetUrlVar(VarName)   
   {  
   name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");  
   var regexS = "[\\?&]" + VarName + "=([^&#]*)";  
   var regex = new RegExp(regexS);  
   var results = regex.exec(window.location.href);  
   if (results == null)  
        return "";  
   else  
        return results[1];  
   }  
  

• 利用上述取得網址參數的函式就能進一步改寫前述Demo程式，譬如在jsfiddle、github的HTML碼，但這個例子要記得複製下來在自己的電腦上以瀏覽器開啟，再到網址列補上「?x1=24.123375&y1=120.678040&x2=24.123433&y2=120.67848900000001&g=250.2857142857143&p=-1.9285714285714255&w=180&h=125&i=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JMlIb6RYZyhzErd0b7OJ0WU_FH9EhapuW-kuCVw6n1Z5oKs-Zn0s4fSZBPif7lWjub4glK2u8xGJgWBfkmC_vBB7qmEeQDs4yr0Xg7qbw-HMUObAgolBi2wJU3UdMdnKXgpPM3vKhGI/s1600/6962389-2764590.jpg」 (注意這個例子還有用到Number()函式)。

• 完成上述步驟，接下來就自己試著把先前學過的Google Spreadsheet拿來當作儲存參數的雲端資料庫，然後從Spreadsheet讀取一筆資料並傳遞各個參數給上述的照片疊合街景網頁。

有關Google Streetview API，還有兩個重點：直接存取「街景服務」資料、提供自訂「街景服務」全景，有興趣可以進一步了解，搞懂之後就大概能想像YouVisit是如何做出來的了。

p.s. 每次講到程式開發，總是要跟大家提醒先從網路上搜尋別人的經驗，而非自己一股腦兒背語法查手冊從無到有自己寫。好的程式設計師們也知道，他們不是世界上第一個遇到某個問題的人。他們使用 Google 搜尋，運用適當的關鍵字搜尋，來找尋一切可能的解答，並小心地評估這個解答，從中找出真正有用的內容。