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',    //场景IDpov:{   //视角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>

申请开发密钥(key)

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

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

在引用api时设置key：

4、在WEB服务器点击“打开网页”，可观看效果

这里出现乱码是因为文本的content-type告诉浏览器用UTF-8，而记事本默认为ANSI格式，所以需要用记事本打开index.html,然后另存为进行保存，保存格式选择UTF-8，重新打开。

乱码问题点击打开链接：

1. html文件是有编码格式的，这个在特定的编辑器中才能看出来，并进行设置。

2. html文件中头部的"content-type"中设置的"charset"是告诉浏览器打开该文件的编码方式。

3. 一般1、2点中的编码方式应该一致，不一致可能出现乱码。

4. 如果浏览器中显示乱码，但是页面源文件不是乱码，可以通过修改浏览器的编码方式看到正确的中文，如果在源文件中设置了正确的"charset"，就不需要修改浏览器的编码方式了。

5、概念及基本使用方法点击打开链接

场景(pano)：

一个360度的全景即为一个场景（街景是由无数个场景组成的），每一个场景都有自己的一个唯一标识，我们称为“PanoId”

视角(pov)：point of view

偏航角(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() [使用示例]

利用腾讯地图API调用街景相关推荐

html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码 import axios from 'axio ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
调用腾讯地图API.高德地图API 获取当前地理位置.经纬度 web开发中,很多情况下都会需要获取当前位置的经纬度,在网上找了几个不同的地图,最终找到兼容比较好的腾讯地图API 1.调用腾讯地图API ...
如何在微信小程序中调用腾讯地图api
微信小程序的地图api是非常有限的,如果要搜索地图上的位置,比如附近的医院.学校等,就需要使用地图api,使用腾讯地图api的过程如下: 一.开发者申请腾讯地图进入官网http://lbs.qq.c ...
html5页面中添加腾讯地图api
html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
前端web用腾讯地图api根据地址获取经纬度
需求:使用腾讯地图,通过输入的地址获取经纬度 1.先引入腾讯地图,参考https://blog.csdn.net/l13620804253/article/details/117254651 2.要调 ...
腾讯地图api如何根据地址获取经纬度
腾讯地图api如何根据地址获取经纬度 /** * 根据地址得到经纬度 //GET请求 */ @GetMapping("tencentGetLatLngBy/{a ...
详细地址访问腾讯地图API，转换为经纬度
1.首先引入腾讯地图API <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"& ...

利用腾讯地图API调用街景