2013/09/22

Google Maps API 街景服務

街景服務是Google Map其中一個功能，街景服務可以讓我們從Google Map小人圖去取得街景


透過小人去取得的街景圖，可以更清楚的知道該路口附近有什麼明顯的指標，像我自己蠻常用這項服務的，自從Google Map出來後，就極少用過別家的地圖服務了！



有了街景圖可以讓我們在查詢街道時有一個相對位置，不過別以店家作為相對位置喔，店家何時會倒都不知道喔！到時候約會遲到或找不到地點就不要怪Google Map，要怪自己把目標用錯！


會寫這篇是因為最近的案子需要，廠商希望能夠將平面地圖變成街景服務，我就研究一下，筆記筆記


建議寫之前，先試用一下街景服務


街景服務與一般地圖不同的地方在於：

  • 一般地圖是平面，視角不可調，難以得知附近景物
  • 街景地圖是實景，視角可調整，可以得知附近景物


既然提到視角可調，就得提一下，街景服務有提供

  • 縮放距離
  • 相機擺放角度
  • 相機傾斜角度


縮放距離提供0到3的數值作為選擇，初始值是1，最小是0，少數地圖可能不支援縮放距離

相機擺放角度預設為0(正北方)，90度則為正東方，以順時鐘的方式去選轉

相機傾斜角度能夠垂直正負90度，預設為0，要注意如果是拍山丘等圖片，其預設傾角就不能為水平

為什麼Google Map可以提供多種角度的照片呢？你可以上網搜尋『Google Map Car』就知道原因啦！曾經在義大遇到那台車，蠻有趣的經驗！






以下程式碼以我們學校座標為例：

縮放距離：1
相機擺放角度：0
相機傾斜角度：0

街景照片



縮放距離：1
相機擺放角度：0
相機傾斜角度：20

街景照片



縮放距離：1
相機擺放角度：90
相機傾斜角度：0

街景照片



縮放距離：1
相機擺放角度：90
相機傾斜角度：-20

街景照片



<!DOCTYPE HTML>
<html>
 <head>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=key number&sensor=false&region=zh-tw"></script>
  <script type="text/javascript">

   function Init () {
    
     var fenway = new google.maps.LatLng(22.7675877, 120.3792139);

     var panoramaOptions = {
      position: fenway,
      pov: {
       heading: 0,
       pitch: 0,
       zoom: 1
      }
     };

     var panorama = new  google.maps.StreetViewPanorama(
      document.getElementById("map"), panoramaOptions);
   }
  </script>
  <style type="text/css">
   html { height: 100% }
   body { height: 100%; margin: 0; padding: 0 }
   #map { height: 95% ; width: 100% }
  </style>
 </head>
 <body onload="Init()">
  <div id="map"></div>
 </body>
</html>



參考資料：
https://developers.google.com/maps/documentation/javascript/streetview?hl=zh-tw
http://www.somethingboutarchie.com/2011/08/david-saw-google-maps-car.html

圖片資料：
http://sfcitizen.com/blog/wp-content/uploads/2011/04/2584018127_c2701eaef8_o.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGrDGCHrs7ZKUHc_wkuCpyKfwmp4sWkdL6NqySyxqUw9HsJyzJfrUoK4H7_MK1E1mkw3z-LDYO2zFQ1ox3CgzjL7SHOf0e-sIZuGdlaLG5vuTRxw7L8WdKErCoJ-bbi98B3So4PXE06Ya5/s400/gmc.png
By at
標籤: , ,