小白调用soso街景API

    虽然对于美国或者喜欢用google earth的人来说,街景地图运用得炉火纯青了,但是对于中国人...额...准确点,大陆人来说,街景地图确实还没有被多数人所熟知。今天,由我来介绍一下soso街景地图,以及以非常简单的方式调用soso街景API。

    为什么要用soso街景:

        1.对于很多用户来说,这是一个全新的搜索体验。http://map.soso.com/#pano=10071002121024152623300&heading=6&pitch=9&zoom=1

        2.地图很新,拿我家门口来说,今年三月才更新,非常给力。

        3.调用方便,虽然我这篇文章中只介绍一点点点点。

        4.街景加载速度很快,要比google街景给力得多【毕竟是国产,支持国货】

    弊端:

        1.街景不像是普通地图,必须要开着街景车去采集,所以很多地方没有。

        2.soso的卫星地图在缩放时有一定局限性,太大会导致不能查看。

    下面,就正式开始吧!!!

    首先,需要在soso上申请开发密钥http://api.map.soso.com/ApplicationKey.html ,然后在官方文档中,会有很多教我们入门的小案例,当然开始还是一个hello world程序啦。代码如下:

    

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>街景-Hello world</title>
<script charset="utf-8" src="http://map.soso.com/api/v2/main.js?key=d84d6d83e0e51e481e50454ccbe8986b"></script>
<script>
var init = function(){
	pano_container=document.getElementById('PanoCtn');	//街景容器
	pano = new soso.maps.Panorama(pano_container, {
		pano: '10011501120802180635300',	//场景ID
		pov:{	//视角
				heading:1,	//偏航角
				pitch:0		//俯仰角
			},
		zoom:1		//缩放
	})
}
</script>
</head>
<body onload="init()">
	<div id="PanoCtn" style="width:500px;height:300px"></div>
</body>
</html>
    直接运行可以知道,这个程序可以直接定位到场景ID为10011501120802180635300的街景上,但是我们怎么知道此处的场景id是多少呢?API中给了我们一系列可以得到此处场景ID的方法,包括通过此处坐标等等,但是在普通的网页设计时,我们仅仅是需要标出公司位置即可(假设是为某公司开发主页),而且我是小白,刚开始学习javascript,不知道怎么调用API中给我的函数。问题2:如果是利用坐标定位来得到ID,会有一定的不准确性,对此,soso也给出了相应的解决办法,此处不做介绍(我不懂...看起来很高端的样子...囧)。

    对于上面的问题,有一种很简单的解决方案:我们只需要在网页上搜索你想要查看街景的地方,然后进行抓包就可以了,具体操作如下(拿成都天府广场作为例子...热爱家乡...你懂的):

        1.打开soso街景地图,搜索成都天府广场,在蓝色区域查看街景。

        2.然后...然后...URL地址栏上面pano后面的一长串数字就是panoID啦,直接copy下来,替换到上面程序中的pano即可。【以前没注意地址栏,害得我抓包,几十个请求慢慢找】

        3.如果你替换掉以后,依然没有显示,可能的原因是A:你没有发布到服务器环境,B:没有网络。这两点在soso官方文档中也写的很清楚,所以大家也务必仔细查看官方文档。

        到这里,我要讲的就基本完了,这仅仅是用于非常基础的开发,这种调用方式用的也非常广泛,不过也有很多不足,还请大家指正。

你可能感兴趣的:(soso街景API,soso街景地图,街景地图,soso地图,sosoAPI)