SOSO街景地图 API （Javascript）开发教程（1）- 街景

最新推荐文章于 2023-09-24 15:40:41 发布

bugliu

最新推荐文章于 2023-09-24 15:40:41 发布

阅读量2.8k

点赞数

分类专栏： javascript 文章标签：地图api javascript street view 街景

本文链接：https://blog.csdn.net/bugliu/article/details/10979307

版权

本文是SOSO街景地图API的Javascript开发教程，介绍了街景的基本概念，如场景（pano）、视角（pov）等，并通过Hello World示例展示如何使用API。教程涵盖街景类、方法、事件、街景中标注、街景与地图连动及在移动端的应用。适合想要在网页中嵌入街景地图的开发者阅读。

摘要由CSDN通过智能技术生成

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哟~）

<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	//缩放
	})
}