SOSO街景地圖 API （Javascript）開發教程（1）- 街景

時間 2019-11-08

標籤 soso 街景地圖 api javascript 開發教程欄目 JavaScript 简体版

原文原文鏈接

原文 http://www.cnblogs.com/BugLiu/p/3291994.htmljavascript

SOSO街景地圖 Javascript API 幹什麼用的？html

你想在網頁裏嵌入個地圖，就須要它了！html5

另外，它還支持：地點搜索、周邊/附近查詢、地圖標註、公交/駕車路線規劃、地理座標與地址相互轉換、地理定位等 LBS 應用功能。java

（不知道LBS啥意思？這麼時髦的詞不知道？問度娘，不解釋）nginx

由於基本的地圖功能，各家API都大同小異，本講先從SOSO最獨特的街景講起，以避免你們犯困~算法

目錄：apache

1、什麼是街景windows

2、基本概念api

3、Hello World！數組

4、街景類、方法介紹

5、事件

6、街景中標註（及綜合示例）

7、街景與地圖連動

8、街景在移動端中的應用（html5 URL 接口）

1、什麼是街景

街景（Street View ），是一種在街道上拍攝的360度全景圖像，指望用戶在查看時能有走在街道上的感受。

咱們能夠把街景理解爲地圖的一種查看模式，相似衛星、三維地圖。街景的查看角度更貼近地面，更能讓用戶查看到街道上的細節。

應用貼士：我立刻要去的地方長啥樣？買房以前這麼多小區一家一家轉太累了！旅遊前看看要去的地方值不值！一個複雜的立交橋應該怎麼走過去？

正所謂：「人未動，心已達，人一動，不白瞎~」

圖片，不能點

2、基本概念

2.1 場景(pano)：

一個360度的全景即爲一個場景，街景是由無數人這樣的場景組成，
每個場景都有本身的一個惟一標識，咱們稱爲「PanoId」，就像是新聞系統，每篇文章都有ID同樣

a) 街景是一張拼接好的完整的360度的照片

b) 將這張照片貼在一個球體的內面，將觀察者置於球心，這樣360度的全景感覺就出來了

c) 街景行走時，從一個場景，切換到了另外一個場景中，就像新聞系統的「下一篇」

2.2 視角(pov)：

「我向哪邊看？東西南北？擡頭低頭？」

a) 偏航角(heading)：控制觀察方向，是與正北方向的夾角，順時針一週爲360度

b) 俯仰角(pitch)：簡單的說就是擡頭或低頭的角度，水平爲0度，低頭爲0至90度，擡頭爲0至-90度，

c) 縮放(zoom)：分爲1至4級，像望遠鏡同樣，4級放得最大，看得最遠

2.3 座標吸附：

經過某點 經緯度 獲取 指定半徑內 其 最近街景場景 信息（包括panoId、場景所在座標等）。

API爲：soso.maps.PanoramaService.getPano(position:LatLng, radius:Number, callback:Function)

下圖示意：給定A點座標，範圍100米，取最近街景場景信息，正好是B點，獲取到B點的街景信息後，就能夠經過API顯示出街景了！

應用貼士：你有某個商場的座標，想顯示它的街景

2.4 街景圖層（藍色高亮路網）：soso.maps.PanoramaLayer

顯示街景道路覆蓋範圍的地圖疊加層：

應用貼士：當交互方式爲：街景與地圖同時顯示，在地圖中點擊則切換場景，用於代表哪有街景，哪沒街景

3、Hello world！

3.1. 申請密鑰（key）

進入SOSO地圖API官網，http://api.map.soso.com/ ，菜單中：開發密鑰 -> 申請密鑰

QQ號登陸，分分鐘搞定，不詳述

提示：公司申請密鑰儘可能不要用私人QQ號，人事變更再所不免，用私人的會比較麻煩

密鑰配置方法：引入API時，設置參數 key = 你的key （提示，以面代碼要換成你本身的Key喲~）

< script src = "http://map.soso.com/api/v2/main.js?key=YourKey" ></ script >

3.2. 配置調試環境

由於Flash權限上的一些限制，街景api須要在有Web服務的狀況下才能正常使用，windows環境可使用IIS或其它一些更輕量級的Web服務器軟件，Linux可用apache/nginx等，配置完成後經過localhost進行調試使用（發佈上線，用域名/ip訪問不存在這個問題）：

推薦：迷你ASP服務器(Sws AspWebServer) ，只有一個.exe文件，放到你要調試街景網頁的目錄下，雙擊運行，它所在的目錄主是 localhost 的根目錄了，瀏覽器會自動彈開

3.3. 使用如下代碼保存網頁，並查看效果

Panorama類的細節能夠參看官網文檔，細節不講了，本文以實用爲主，註釋會盡可能寫全

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <meta http-equiv= 
         "Content-Type" 
         content= 
         "text/html; charset=utf-8" 
         /> 
        
         <title>街景-Hello world</title> 
        
         <script charset= 
         "utf-8" 
         src= 
         "http://map.soso.com/api/v2/main.js?key=YourKey" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         > 
        
         var 
         init =  
         function 
         (){ 
        
         //街景容器 
        
         var 
         pano_container=document.getElementById( 
         'PanoCtn' 
         ); 
        
         //建立街景對象，並傳入街景容器 及 設置 
        
         pano =  
         new 
         soso.maps.Panorama(pano_container, { 
        
         pano:  
         '10011501120802180635300' 
         ,  
         //初始場景ID，請問這個ID從哪來？ 見下文 
        
         pov:{ 
        
         heading:1,   
         //偏航角 
        
         pitch:0      
         //俯仰角 
        
         }, 
        
         zoom:1   
         //縮放 
        
         }) 
        
         } 
        
         </script> 
        
         </head> 
        
         <body onload= 
         "init()" 
         > 
        
         <!-- 街景將顯示在如下 div 中 --> 
        
         <div id= 
         "PanoCtn" 
         style= 
         "width:500px;height:300px" 
         ></div> 
        
         </body> 
        
         </html>

無圖無真相（圖片，不能點）：

3.4. 必問：請問初始化時的PanoID從哪來的？

heading/pitch/zoom 能夠隨便設置個值，得PanoID上哪搞？

答：兩種途徑能夠獲得panoId：

one. 手工選景：
進入http://map.soso.com/ 進入街景，找到你想要的場景，地址欄裏的地址，就包含panoId，如：
  http://map.soso.com/#pano=10011021130407154404600&heading=74&pitch=-2&zoom=1
  pano=xxx 就是panoId
  heading 是偏航角
  pitch 是俯仰角

應用貼士：你只有一兩家店，選一下就好，這樣簡單！

two. 經過吸附接口：
PanoService.getPano()
詳細使用方法見說明：http://api.map.soso.com/doc_v2/guide-pano.html
頁面第三屏位置有對「吸附」的詳細描述
（下文會有示例程序）

應用貼士：手裏的POI信息成百上千，手工選景不現實。

交互須要：用戶點擊平面地圖，直接切換場景，使用戶在街景中快速切換地點（瞬移）

應用須要：用戶點擊某POI，同時展示街景給他

4、街景類、方法介紹：

helloworld裏對街景API的調用已經有了一個大體的樣例了，下面詳細介紹一下街景涉及類和經常使用方法：

4.1) soso.maps.Panorama() //街景主類，顯示街景都靠他了

soso.maps.Panorama.getPano() //獲得當前場景panoId

soso.maps.Panorama.setPano(string:panoId) //設置場景，用於控制場景切換

soso.maps.Panorama.getPov()：//獲得當前視角Pov:{heading:Number,pitch:Number}

soso.maps.Panorama.setPov({heading:Number,pitch:Number}) //設置視角，API官網的原地轉動播放效果就靠它了

soso.maps.Panorama.getPosition() //獲取當前場景的座標，返回類型：LatLng，可用於計算當前街景位置與另外一座標的距離

4.2) soso.maps.PanoramaService() //街景服務類

soso.maps.Panorama.getPano() //座標吸附：上文有講，由經緯度獲得指定半徑內最近的街景（在 街景中標註中有示例代碼）

4.3) soso.maps.PanoramaLabel：街景中標註（下文詳述）

4.4) soso.maps.PanoramaLayer() //街景覆蓋範圍圖層，上文有講，結合地圖使用

實例出真知 - 街景圖層（地圖API將在後續系列文章中介紹，如下簡單演示，不詳解）：

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <meta http-equiv= 
         "Content-Type" 
         content= 
         "text/html; charset=utf-8" 
         /> 
        
         <title>SOSOMap - 街景圖層 PanoramaLayer </title> 
        
         <!--引入SOSO街景地圖API，使用時記得替換YourKey！ --> 
        
         <script src= 
         "http://map.soso.com/api/v2/main.js?key=YourKey" 
         ></script> 
        
         <script> 
        
         var 
         init =  
         function 
         (){ 
        
         //建立地圖，設置地圖中心座標，預設縮放爲13級（zoomLevel取值範圍4-18級） 
        
         var 
         map =  
         new 
         soso.maps.Map(document.getElementById( 
         "container" 
         ),{ 
        
         center:  
         new 
         soso.maps.LatLng(39.916527,116.397128), 
        
         zoomLevel: 13 
        
         }) 
        
         //建立街景圖層（高亮路網）實例 
        
         var 
         pano_layer =  
         new 
         soso.maps.PanoramaLayer(); 
        
         pano_layer.setMap(map); 
         //將街景圖層添加到地圖中 
        
         } 
        
         </script> 
        
         </head> 
        
         <body onLoad= 
         "init()" 
         > 
        
         <!-- 地圖顯示在如下 div 中 --> 
        
         <div style= 
         "width:603px;height:300px" 
         id= 
         "container" 
         ></div> 
        
         </body> 
        
         </html>

5、事件

5.1 經常使用事件：

pano_changed：場景發生改變時會觸發此事件，如：用戶點擊箭頭前進了，經過pano.setPano方法切換了場景等

pov_changed：偏航角或俯仰角發生改變時觸發，如：用戶手動場景轉動方向

error：街景場景載入錯誤時觸發，經常使用於容錯

不經常使用：loaded：街景場景載入完成時觸發

zoom_changed（街景縮放級別改變時）

visible_changed（街景顯示狀態變化時）

position_changed（街景座標變化時，同 pano_change 相似）

5.2 怎麼添加事件？

1	`soso.maps.event.addListener(pano,` `'pano_changed'` `,` `function` `() {alert(` `'場景改變了'` `)});`

參數1：要添加事件的對象，示例中爲pano

參數2：事件名

參數3：觸發時執行的方法

5.3 實例出真知：（引自官網，詳於官網）

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <meta http-equiv= 
         "Content-Type" 
         content= 
         "text/html; charset=utf-8" 
         > 
        
         <title>SOSOMap - 事件</title> 
        
         <!--引入SOSO街景地圖API，使用時記得替換YourKey！ --> 
        
         <script charset= 
         "utf-8" 
         src= 
         "http://map.soso.com/api/v2/main.js?key=YourKey" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         > 
        
         function 
         init() { 
        
         // 建立街景 
        
         pano =  
         new 
         soso.maps.Panorama(document.getElementById( 
         'pano_container' 
         ), { 
        
         "pano" 
         :  
         '10011001120131111029111' 
        
         }); 
        
         //爲pano添加pov_changed事件 
        
         soso.maps.event.addListener(pano,  
         'pov_changed' 
         ,  
         function 
         (){ 
        
         //獲得調整後的視角 
        
         //pov對象結構：{heading:Number,pitch:Number} 
        
         var 
         pov = pano.getPov(); 
        
         document.getElementById( 
         'heading' 
         ).value = pov.heading;  
         // 文本框中顯示新heading 
        
         document.getElementById( 
         'pitch' 
         ).value = pov.pitch;  
         // 文本框中顯示新pitch 
        
         }); 
        
         } 
        
         </script> 
        
         </head> 
        
         <body onLoad= 
         "init();" 
         > 
        
         <!--如下div顯示街景--> 
        
         <div style= 
         "width:603px;height:300px" 
         id= 
         "pano_container" 
         ></div> 
        
         heading：<input type= 
         "text" 
         id= 
         "heading" 
         > 
        
         pitch：<input type= 
         "text" 
         id= 
         "pitch" 
         ><label> 
        
         <p>用戶操做查看器致使視角變化後觸發</p> 
        
         </body> 
        
         </html>

6、街景中標註

應用貼士：在街景中標註出POI，或指明方位

街景API中提供的 PanoramaLabel（街景標註類），僅支持文本標註，樣式不可更改，可自定義事件

實例出真知：

此次是綜合的示例，除了演示PanoramaLabel之外，還集成了以前介紹的功能，和SOSOAPI搜索功能：

Step1：在SOSO地圖中，在「北京」搜索「家樂福」

Step2：取搜索結果中的第一個家樂福（北京家樂福不止一個），座標吸附獲得街景

Step3.1：建立街景，

Step3.2：在街景中標註POI名稱，點擊後彈出「我是：POI名稱」

Step3.3：視角轉向POI

 
         <!DOCTYPE HTML PUBLIC  
         "-//W3C//DTD HTML 4.01//EN" 
         "http://www.w3.org/TR/html4/strict.dtd" 
         > 
        
         <html> 
        
         <head> 
        
         <meta http-equiv= 
         "Content-Type" 
         content= 
         "text/html; charset=utf-8" 
         > 
        
         <title>SOSO街景 - Panoramalabel綜合示例</title> 
        
         <!--引入SOSO街景地圖API，使用時記得替換YourKey！ --> 
        
         <script charset= 
         "utf-8" 
         src= 
         "http://map.soso.com/api/v2/main.js?key=YourKey" 
         ></script> 
        
         <script> 
        
         function 
         init() { 
        
         var 
         poi; 
        
         //Step-2 街景吸附：獲得POI半徑200米內最近的街景場景 
        
         var 
         getPanoInfo= 
         function 
         (){ 
        
         //建立街景服務對象，用於吸附獲得傳入POI的街景 
        
         //詳細手冊參見：http://api.map.soso.com/doc_v2/ApiGuide.html#PanoramaService 
        
         var 
         ps =  
         new 
         soso.maps.PanoramaService();  
         //建立實例 
        
         //吸附：poi座標爲中心，半徑150米內最近街景，完成後回調：setPanoramalabel 
        
         ps.getPano(poi.latLng,150,setPanoramalabel);  
        
         } 
        
         //Step-3 建立街景，視角轉向POI，並在街景中標註POI名稱 
        
         var 
         setPanoramalabel= 
         function 
         (Result){ 
        
         //判斷吸附結果是否有街景 
        
         if 
         (Result!= 
         null 
         ){ 
        
         //Step-3.1 建立街景 
        
         var 
         pano =  
         new 
         soso.maps.Panorama(document.getElementById( 
         'pano_container' 
         ), { 
        
         pano: Result.svid   
         // svid就是panoId，SOSOAPI取名不一致 
        
         }); 
        
         //Step-3.2 在街景中標註 
        
         var 
         panolabel= 
         new 
         soso.maps.PanoramaLabel({ 
        
         panorama:pano,   
         //標註在上邊剛建立的街景中 
        
         altitude:15.0,   
         //標註高度15米，場景中的真實高度（我隨便設的） 
        
         position:poi.latLng,  
         //標註點，標在與搜索結果相同的座標上 
        
         content:poi.name     
         //標註內容 
        
         }); 
        
         //Step-3.3 事件示例：單擊Label後彈出「我是：poi.name」 
        
         soso.maps.event.addListener(panolabel, 
         'click' 
         , 
         function 
         (e){ 
        
         alert( 
         "我是：" 
         + e.target.content) 
        
         }); 
        
         ////Step-3.4 調整街景視角，面向標註的Label， 
        
         //如下算法有興趣的朋友能夠研究一下，算出來的就是 街景場景座標 面向 POI座標 的偏航角(heading) 
        
         var 
         x1 = Result.latlng.lng , y1 = Result.latlng.lat;  
         //街景場景所在位置座標 
        
         var 
         x2 = poi.latLng.lng , y2 = poi.latLng.lat;       
         //「家樂福」的搜索結果第一項的位置座標 
        
         var 
         alpha = Math.acos((y2 - y1) / Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))); 
        
         if 
         (x2 - x1 < 0){ 
        
         alpha = Math.PI * 2 - alpha; 
        
         } 
        
         var 
         heading=alpha/Math.PI*180; 
        
         //設置視角面向POI 
        
         pano.setPov({heading : heading, pitch : 0}); 
        
         } 
        
         } 
        
         //Step-1 程序入口： 
        
         //在SOSO地圖中，在「北京」 搜索 「家樂福」 
        
         //使用SearchService(檢索服務)，首先配置檢索選項 
        
         var 
         SearchOptions={ 
        
         //搜索範圍 
        
         location :  
         "北京市" 
         , 
        
         //搜索完成後回調， results爲搜索結果 
        
         //本節主講街景，關於SearchService的具體細節可參看http://api.map.soso.com 
        
         complete :  
         function 
         (results){ 
        
         //獲取檢索結果的POI數組 
        
         var 
         pois = results.detail.pois; 
        
         if 
         (pois.length>0){ 
         //判斷是否有搜索結果 
        
         //本示例取搜索結果第一項進行標註，僅爲說明使用方法 
        
         poi=pois[0]; 
        
         getPanoInfo();  
         //見Step-2：吸附獲取搜索結果的街景 
        
         } 
        
         }, 
        
         error: 
         function 
         (){alert( 
         'wocao' 
         )} 
        
         }; 
        
         //建立檢索服務實例，並將搜索設置傳入其構造方法 
        
         var 
         ss =  
         new 
         soso.maps.SearchService(SearchOptions); 
        
         ss.search( 
         "家樂福" 
         );  
         //執行搜索 
        
         } 
        
         </script> 
        
         </head> 
        
         <body onLoad= 
         "init();" 
         > 
        
         <!--街景顯示在如下 div 中 --> 
        
         <div style= 
         "width:603px;height:300px" 
         id= 
         "pano_container" 
         ></div> 
        
         </body> 
        
         </html> 
        
         </html>

無圖無真相：（圖片，不能點）

7、街景與地圖連動

應用貼士：顯示街景，同時配置全地圖，顯示當前街景所在位置，提高用戶體驗

應用效果：（圖片不能點，想試本身弄或看soso地圖api官網 http://api.map.soso.com/contractus.html ）

SOSO地圖以插件方式提供了這個功能，使用時，除了引用api之外，還要引入插件的.js文件

此插件僅實現了地圖與街景連動，UI、樣式須要開發者本身實現

插件地址：http://api.map.soso.com/plugin/v2/PanoramaOverview/PanoramaOverview-min.js

實例出真知：

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <meta http-equiv= 
         "Content-Type" 
         content= 
         "text/html; charset=utf-8" 
         /> 
        
         <title>街景與地圖連動</title> 
        
         <!--引入SOSO街景地圖API，使用時記得替換YourKey！ --> 
        
         <script charset= 
         "utf-8" 
         src= 
         "http://map.soso.com/api/v2/main.js?key=YourKey" 
         ></script> 
        
         <!--引入PanoramaOverview 插件 --> 
        
         <script src= 
         "http://api.map.soso.com/plugin/v2/PanoramaOverview/PanoramaOverview-min.js" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         > 
        
         var 
         init =  
         function 
         (){ 
        
         //街景容器 
        
         var 
         pano_container=document.getElementById( 
         'PanoCtn' 
         ); 
        
         //建立街景對象，並傳入街景容器 及 設置 
        
         pano =  
         new 
         soso.maps.Panorama(pano_container, { 
        
         pano:  
         '10011501120802180635300' 
         ,  
         //初始場景ID 
        
         pov:{ 
        
         heading:1,   
         //偏航角 
        
         pitch:0      
         //俯仰角 
        
         }, 
        
         zoom:1   
         //縮放 
        
         }) 
        
         //地圖容器 
        
         var 
         MapCtn=document.getElementById( 
         'MapCtn' 
         ); 
        
         //建立PanoOverview插件實例 
        
         var 
         overview =  
         new 
         soso.maps.PanoOverview(MapCtn,{ 
        
         panorama:pano   
         //與pano連動 
        
         }); 
        
         //調用getMap方法，可獲得地圖實例，用於後續操做（如在上面標註等），隨你操做 
        
         var 
         map=overview.getMap(); 
        
         map.zoomTo(16);  
         //將map調整到17級 
        
         } 
        
         </script> 
        
         </head> 
        
         <body onload= 
         "init()" 
         > 
        
         <!-- 街景 將顯示在如下 div 中 --> 
        
         <div id= 
         "PanoCtn" 
         style= 
         "width:500px;height:300px" 
         ></div> 
        
         <!-- 地圖 將顯示在如下 div 中 --> 
        
         <div id= 
         "MapCtn" 
         style= 
         "width:500px;height:200px" 
         ></div> 
        
         </body> 
        
         </html>

8、街景在移動端中的應用（html5 URL 接口）

針對移動端，SOSO街景地圖API提供了Url方式的街景（html方式實現的），適用於手機瀏覽器。

（由於SOSO街景API是基於flash實現的，在IOS和Android沒法運行，所以提供了html5的實現方案）

使用時，依實際需求，並根據url規範拼接成url，並可將其嵌入到iframe中

如何結合街景的JsAPI使用？，好比，我要經過座標吸附獲得街景，並在手機上顯示html5的街景

答：在移動端網頁中，soso地圖的javascript是可使用的，

能夠正常使用PanoramaService.getPano()，獲取街景信息後，拼接Url，將街景顯示在iframe中便可

（文檔取自官網論壇）

8.1 調用形式：

參數經過hash傳遞，格式形如：
http://jiejing.soso.com/#pano=10011005120203110208500&heading=45&pitch=10&zoom=1&key=yourkey

8.2 參數列表：

基礎參數

名稱	類型	說明
pano		場景點svid
heading	0 - 360	偏航角，與正北夾角
pitch	-90 - 90	俯仰角
zoom	1 - 4	縮放級別
key		開發者key

POIMarker（標註）

名稱	類型	說明
i		POI的UID
m	lng,lat	POI的經緯度
n		name，POI的名稱
a		address，POI的地址
p		phone，POI的電話
rn		roadname，POI所在路名

功能開關

名稱	類型	說明
nav	0:關閉 1:開啓	導航功能，默認開啓
poi	0:關閉 1:開啓	重點POI，默認關閉
arrow	0:關閉 1:開啓	前進後退箭頭，默認開啓
addr	0:關閉 1:開啓	地址欄，默認開啓
minimap	0:關閉 1:開啓	平面小地圖