當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

街景地图 API

發布時間：2024/5/24 综合教程 55 生活家

生活随笔收集整理的這篇文章主要介紹了街景地图 API 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

SOSO街景地圖 Javascript API 干什么用的？

你想在網頁里嵌入個地圖，就需要它了！

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

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

因為基本的地圖功能，各家API都大同小異，本講先從SOSO最獨特的街景講起，以免大家犯困~

目錄：

一、什么是街景

二、基本概念

三、Hello World！

四、街景類、方法介紹

五、事件

六、街景中標注（及綜合示例）

七、街景與地圖連動

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

一、什么是街景

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

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

應用貼士：我馬上要去的地方長啥樣？買房之前這么多小區一家一家轉太累了！旅游前看看要去的地方值不值！一個復雜的立交橋應該怎么走過去？

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

圖片，不能點

二、基本概念

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

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

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

三、Hello world！

3.1. 申請密鑰（key）

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

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

提示：公司申請密鑰盡量不要用私人QQ號，人事變動再所難免，用私人的會比較麻煩

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

<scriptsrc="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類的細節可以參看官網文檔，細節不講了，本文以實用為主，注釋會盡量寫全

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!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">
varinit = function(){
//街景容器
varpano_container=document.getElementById('PanoCtn');
//創建街景對象，并傳入街景容器及設置
pano = newsoso.maps.Panorama(pano_container, {
pano: '10011501120802180635300', //初始場景ID，請問這個ID從哪來？見下文
pov:{
heading:1, //偏航角
pitch:0 //俯仰角
},
zoom:1 //縮放
})
}
</script>
</head>
<body onload="init()">

<div id="PanoCtn"style="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，同時展現街景給他

四、街景類、方法介紹：

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將在后續系列文章中介紹，以下簡單演示，不詳解）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>SOSOMap - 街景圖層 PanoramaLayer </title>

<script src="http://map.soso.com/api/v2/main.js?key=YourKey"></script>
<script>
varinit = function(){
//創建地圖，設置地圖中心坐標，預設縮放為13級（zoomLevel取值范圍4-18級）
varmap = newsoso.maps.Map(document.getElementById("container"),{
center: newsoso.maps.LatLng(39.916527,116.397128),
zoomLevel: 13
})
//創建街景圖層（高亮路網）實例
varpano_layer = newsoso.maps.PanoramaLayer();
pano_layer.setMap(map);//將街景圖層添加到地圖中
}
</script>
</head>
<body onLoad="init()">

<div style="603px;height:300px"id="container"></div>
</body>
</html>

五、事件

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 實例出真知：（引自官網，詳于官網）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
<title>SOSOMap - 事件</title>

<script charset="utf-8"src="http://map.soso.com/api/v2/main.js?key=YourKey"></script>
<script type="text/javascript">
functioninit() {
// 創建街景
pano = newsoso.maps.Panorama(document.getElementById('pano_container'), {
"pano": '10011001120131111029111'
});
//為pano添加pov_changed事件
soso.maps.event.addListener(pano, 'pov_changed', function(){
//得到調整后的視角
//pov對象結構：{heading:Number,pitch:Number}
varpov = pano.getPov();
document.getElementById('heading').value = pov.heading; // 文本框中顯示新heading
document.getElementById('pitch').value = pov.pitch; // 文本框中顯示新pitch
});
}
</script>
</head>
<body onLoad="init();">

<div style="603px;height:300px"id="pano_container"></div>
heading：<input type="text"id="heading">
pitch：<input type="text"id="pitch"><label>
<p>用戶操作查看器導致視角變化后觸發</p>
</body>
</html>

六、街景中標注

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

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

實例出真知：

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

Step1：在SOSO地圖中，在“北京” 搜索 “家樂福”

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

Step3.1：創建街景，

Step3.2：在街景中標注POI名稱，點擊后彈出“我是：POI名稱”

Step3.3：視角轉向POI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<!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>

<script charset="utf-8"src="http://map.soso.com/api/v2/main.js?key=YourKey"></script>
<script>
functioninit() {
varpoi;
//Step-2 街景吸附：得到POI半徑200米內最近的街景場景
vargetPanoInfo=function(){
//創建街景服務對象，用于吸附得到傳入POI的街景
//詳細手冊參見：http://api.map.soso.com/doc_v2/ApiGuide.html
varps = newsoso.maps.PanoramaService(); //創建實例
//吸附：poi坐標為中心，半徑150米內最近街景，完成后回調：setPanoramalabel
ps.getPano(poi.latLng,150,setPanoramalabel);
}
//Step-3 創建街景，視角轉向POI，并在街景中標注POI名稱
varsetPanoramalabel=function(Result){
//判斷吸附結果是否有街景
if(Result!=null){
//Step-3.1 創建街景
varpano = newsoso.maps.Panorama(document.getElementById('pano_container'), {
pano: Result.svid // svid就是panoId，SOSOAPI取名不一致
});
//Step-3.2 在街景中標注
varpanolabel=newsoso.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)
varx1 = Result.latlng.lng , y1 = Result.latlng.lat; //街景場景所在位置坐標
varx2 = poi.latLng.lng , y2 = poi.latLng.lat; //“家樂福”的搜索結果第一項的位置坐標
varalpha = 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;
}
varheading=alpha/Math.PI*180;
//設置視角面向POI
pano.setPov({heading : heading, pitch : 0});
}
}
//Step-1 程序入口：
//在SOSO地圖中，在“北京” 搜索 “家樂福”
//使用SearchService(檢索服務)，首先配置檢索選項
varSearchOptions={
//搜索范圍
location : "北京市",
//搜索完成后回調， results為搜索結果
//本節主講街景，關于SearchService的具體細節可參看http://api.map.soso.com
complete : function(results){
//獲取檢索結果的POI數組
varpois = results.detail.pois;
if(pois.length>0){//判斷是否有搜索結果
//本示例取搜索結果第一項進行標注，僅為說明使用方法
poi=pois[0];
getPanoInfo(); //見Step-2：吸附獲取搜索結果的街景
}
},
error:function(){alert('wocao')}
};
//創建檢索服務實例，并將搜索設置傳入其構造方法
varss = newsoso.maps.SearchService(SearchOptions);
ss.search("家樂福"); //執行搜索
}
</script>
</head>
<body onLoad="init();">

<div style="603px;height:300px"id="pano_container"></div>
</body>
</html>
</html>

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

七、街景與地圖連動

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

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

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

此插件僅實現了地圖與街景連動，UI、樣式需要開發者自己實現

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

實例出真知：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>街景與地圖連動</title>

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

<script src="http://api.map.soso.com/plugin/v2/PanoramaOverview/PanoramaOverview-min.js"></script>
<script type="text/javascript">
varinit = function(){
//街景容器
varpano_container=document.getElementById('PanoCtn');
//創建街景對象，并傳入街景容器及設置
pano = newsoso.maps.Panorama(pano_container, {
pano: '10011501120802180635300', //初始場景ID
pov:{
heading:1, //偏航角
pitch:0 //俯仰角
},
zoom:1 //縮放
})
//地圖容器
varMapCtn=document.getElementById('MapCtn');
//創建PanoOverview插件實例
varoverview = newsoso.maps.PanoOverview(MapCtn,{
panorama:pano //與pano連動
});
//調用getMap方法，可得到地圖實例，用于后續操作（如在上面標注等），隨你操作
varmap=overview.getMap();
map.zoomTo(16); //將map調整到17級
}
</script>
</head>
<body onload="init()">

<div id="PanoCtn"style="500px;height:300px"></div>

<div id="MapCtn"style="500px;height:200px"></div>
</body>
</html>

八、街景在移動端中的應用（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/

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:開啟	平面小地圖

8.3 顯示策略說明：

頁面title顯示策略說明

分享POI所在路名(rn參數) > SOSO街景地圖

地址欄顯示策略說明

POI地址>根據當前場景點坐標geoCoding返回的地址

分享窗口wording顯示策略說明

title部分：
分享POI的名稱>分享POI所在的路名(rn參數)
desc部分：
當前地址+ POI地址+電話+ url

無圖無真相：

---- [本文完] ---------

本文如有遺漏，請查閱：

SOSO街景地圖API官網：http://api.map.soso.com/

歡迎各位大牛討論交流！

總結

以上是生活随笔為你收集整理的街景地图 API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： int指令、iret指令
下一篇：川黄颗粒_功效作用注意事项用药禁忌用法用