JavaScript API V2 | 腾讯地图开放平台

介绍

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

数据开放程度：

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

数据覆盖范围：

目前街景覆盖城市请点击查看 [街景城市]，详细路网覆盖范围请进入[腾讯地图]，点击街景按钮，将显示蓝色路网，即代表街景所覆盖的道路。

使用流程

申请开发密钥(Key)

使用街景API时，开发者必须先 [申请密钥] ，街景API对于无Key 或错Key 的情况，会受到一定程度的限制，为了保证您的正常及稳定的使用，请一定注意确保无误。

对于密钥的申请没有任何限制，您只需非常简单的几个步骤即可获得。

在引用API时设置Key：

配置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() [使用示例]