利用腾讯地图API调用街景

最新推荐文章于 2025-02-25 10:14:41 发布

whucv

最新推荐文章于 2025-02-25 10:14:41 发布

阅读量1w

点赞数 1

分类专栏：腾讯地图

本文链接：https://blog.csdn.net/archielau/article/details/39805675

版权

腾讯地图专栏收录该内容

2 篇文章

订阅专栏

1、首先搭建自己的web服务器（可以用IIS或Apache，或更轻量级的软件）

我这里使用了安可WEB服务器：

2、双击WEB服务器，设置网站路径、端口，点击启动（这里的IP是我在命令行输入ipconfig的得到的）

3、在网站目录D:\wwwroot下新建一文本文件，粘贴下面代码，并保存文件名为index.html

这里需要注意的是：需要在页面的前端使用script标签加载API服务，格式如下：

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

其中，v参数是引用的版本号，目前腾讯地图提供两个版本，分别是v=1，v=2.exp，推荐使用2.exp，可以获得最新最快的支持。key参数YOUR_KEY是key鉴权一节中申请的key。

JavaScript API除了提供基本的功能库外，还提供了一些有用的附加库。加载方法是将script标签的src设置为：

http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY&libraries=drawing,geometry,autocomplete,convertor

其中libraries参数用来指明加载的附加库，可以指定多个附加库名称，名称之间用英文半角字符逗号","分隔。支持的附加库种类：

drawing 绘图工具库，用于在地图上方绘制折线、多边形、圆等几何图形；
geometry 几何运算库，用于计算地球表面的距离、面积等；
autocomplete 文本输入提示库，用于快速帮助用户完成检索关键词输入；
convertor 坐标转换库，将标准经纬度或其它地图API经纬度转换为腾讯经纬度坐标系。

关于附加库的详细接口，请参见参考手册。

加载API之后，就可以再Web页面中引用相关的接口。另外，加载方式除以上介绍的，还支持异步加载，完整的示例请参考快速入门。

Android 和 iOS 设备会应用以下 <meta> 标记：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

此设置表示地图以全屏模式显示，不允许用户调整地图的大小。您需要在网页的 <head> 元素中添加此 <meta> 标记

坐标格式：

JavaScript API使用的坐标格式是{纬度, 经度}，即纬度在前，经度在后如果在使用API过程中，发现地图无法显示，请先查看坐标格式是否正确。从其它几家API切换过来的用户尤其要注意这个区别。

地图级别范围：

JavaScript API使用的二维地图和卫星影像图，级别范围都是[1,18]。街景缩放级别Zoom为1-4，腾讯地图API的地图缩放级别为 4-17

<!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="http://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 οnlοad="init()">
    <div id="PanoCtn" style="width:500px;height:300px"></div>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=31153770" charset="UTF-8"></script></body>
</html>