介绍

     街景API,是构建在v2版本上的全新应用接口,可以让用户足不出户,便得到更直观、更真切的体验,比如,您可以用在房产、酒店、餐饮、娱乐、在线旅游等领域,另外还有更多使用场景等待您的发现!

数据开放程度:
     腾讯街景API将为开发者提供与腾讯地图完全相同的全量数据,且与腾讯地图街景保持同步更新。


使用流程

申请开发密钥(Key)

     使用街景API时,开发者必须先 [申请密钥] ,街景API对于 无Key 或 错Key 的情况,会受到一定程度的限制,为了保证您的正常及稳定的使用,请一定注意确保无误。
     对于密钥的申请没有任何限制,您只需非常简单的几个步骤即可获得。

在引用API时设置Key:

<script src=“https://map.qq.com/api/js?v=2.exp&key=d84d6d83e0e51e481e50454ccbe8986b”>

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


Hello world!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>街景-Hello world</title><script type="text/javascript">var _speedMark = new Date();</script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=d84d6d83e0e51e481e50454ccbe8986b"></script>
<script>
var init = function(){
    pano_container=document.getElementById('PanoCtn');  //街景容器
    pano = new qq.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>
<script>
   var _mtac = {};
   (function() {
    var mta = document.createElement("script");
    mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
    mta.setAttribute("name", "MTAH5");
    mta.setAttribute("sid", "500686541");
 
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(mta, s);
   })();
</script></body>
</html>

概念及基本使用方法

场景(pano):
     一个360度的全景即为一个场景(街景是由无数个场景组成的),每一个场景都有自己的一个唯一标识,我们称为“PanoId”。

视角(pov):
     偏航角(heading):与正北方向的夹角,顺时针一周为360度。
     俯仰角(pitch):简单的说就是抬头或低头的角度,水平为0度,低头为0至90度,抬头为0至-90度。
     缩放(zoom):分为1至4级。像望远镜一样,4级放得最大,看得最远。

吸附:
     通过某点经纬度获取指定半径内其最近街景场景信息(包括panoId、场景所在坐标等)。
     API为:qq.maps.PanoramaService.getPano(position:LatLng, radius:Number, callback:Function) [使用示例]
     下图示意:给定A点坐标,范围100米,取最近街景场景信息,正好是B点,获取到B点的街景信息后,就可以通过API显示出街景了!


小贴士:怎么让B点的街景视线朝向A?
     吸附得到的B点场景信息中,包含着B点的坐标,通过两点的坐标运算,可计算出B点面向A点的heading,是不是感觉很难?没关系,点下边的示例,把代码拷走就行了![使用示例]

街景图层(蓝色高亮路网):
     显示街景道路覆盖范围的地图叠加层:
     API为:qq.maps.PanoramaLayer() [使用示例]

这篇文章对您解决问题是否有帮助?

已解决
未解决