街景地图API-飞外

SOSO街景地图 Javascript API 干什么用的?

你想在网页里嵌入个地图,就需要它了!

另外,它还支持:地点搜索、周边/附近查询、地图标注、公交/驾车路线规划、地理坐标与地址相互转换、地理定位等 LBS 应用功能。

(不知道LBS啥意思?这么时髦的词不知道?问度娘,不解释)

因为基本的地图功能,各家API都大同小异,本讲先从SOSO最独特的街景讲起,以免大家犯困~

目录:

一、什么是街景

二、基本概念

三、Hello World!

四、街景类、方法 介绍

五、事件

六、街景中标注 (及综合示例)

七、街景与地图连动

八、街景在移动端中的应用(html5 URL 接口)


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显示出街景了!

应用贴士:你有某个商场的坐标,想显示它的街景


3.2. 配置调试环境

因为Flash权限上的一些限制,街景api需要在有Web服务的情况下才能正常使用,windows环境可以使用IIS或其它一些更轻量级的Web服务器软件,Linux可用apache/nginx等,配置完成后通过localhost进行调试使用(发布上线,用域名/ip访问不存在这个问题):

推荐:迷你ASP服务器(Sws AspWebServer) ,只有一个.exe文件,放到你要调试街景网页的目录下,双击运行,它所在的目录主是 localhost 的根目录了,浏览器会自动弹开

3.3. 使用以下代码保存网页,并查看效果

Panorama类的细节可以参看官网文档,细节不讲了,本文以实用为主,注释会尽量写全


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 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 中 -- div /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
页面中,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 参数列表:


POI地址 根据当前场景点坐标geoCoding返回的地址

分享窗口wording显示策略说明

title部分:分享POI的名称 分享POI所在的路名(rn参数)desc部分:当前地址+ POI地址+电话+ url

无图无真相:

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

本文如有遗漏,请查阅:

SOSO街景地图API官网:http://api.map.soso.com/

欢迎各位大牛讨论交流!