html5 调用本地街景,H5案例分享:在移动端调用腾讯街景

2023-11-18

5e7a2d25e312290c4d9f0f7544b0b843.png

在移动端调用腾讯街景

腾讯地图街景组件可以通过多种方式调起,来展示3D街景信息。

腾讯街景API,是构建在v2版本上的全新应用接口,对于目的地,可以让用户足不出户,得到更直观、更真切 的身临其境的体验,比如,您可以就用在 房产、酒店、餐饮、娱乐、在线旅游等领域。

腾讯地图开放平台链接地址:http://lbs.qq.com/

fd56b6d2d7d62fe253c2797905889e68.png

一、数据开放程度:

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

二、数据覆盖范围:

目前街景覆盖城市请点击查看[街景城市[,详细路网覆盖范围请进入[腾讯地图],,点击街景按钮,

ebc5a78d2ec94daffef998943975ac05.png,将显示蓝色路网,即代表街景所覆盖的道路。

三、概念:

1、场景(pano):

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

① 街景是一张拼接好的完整的360度的照片

8a515bb76e8c911d87a2402548a0c3a5.png

② 将这张照片贴在一个球体的内面,将观察者置于球心,这样360度的全景感受就出来了

322111e9c0497912e6bd298f712b7de5.png

③ 街景行走时,从一个场景,切换到了另一个场景中

843485a0c16307172add4cbdbf1ce92b.png

2、视角(pov):

偏航角(heading):与正北方向的夹角,顺时针一周为360度

俯仰角(pitch):简单的说就是抬头或低头的角度,水平为0度,低头为0至90度,抬头为0至-90度,

缩放(zoom):分为1至4级,像望远镜一样,4级放得最大,看得最远

063e8b462c2bb5de4e834f9361e78862.png

3、坐标吸附:

通过某点经纬度获取指定半径内其最近街景场景信息(包括panoId、场景所在坐标等)。

API为:qq.maps.PanoramaService.getPano(position:LatLng, radius:Number, callback:Function)

下图示意:给定A点坐标,范围100米,取最近街景场景信息,正好是B点,获取到B点的街景信息后,就可以通过API显示出街景了!

cecbd11a39d55d9a9a23d3843330d4a8.png

应用贴士:你有某个商场的坐标,想显示它的街景

4、街景图层(蓝色高亮路网):

显示街景道路覆盖范围的地图叠加层:

API为:qq.maps.PanoramaLayer()

5830297322f66e73d879d71642340d03.png

四、街景在移动端的应用:

针对移动端,腾讯街景地图API提供了一种很好用的方式,采用Url方式的街景(html方式实现的),适用于手机浏览器。

使用时,依实际需求,并根据url规范拼接成url,并可将其嵌入到iframe中

1、调用形式

参数通过hash传递,格式形如:

2、调用实例

① 国家图书馆新馆:

96fc408754619187ee039fb9717c403a.png

演示链接:

② 故宫博物院:

1112bb4aaf548d67d2ab2b3b0a188139.png

演示链接:

3、使用流程:

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

1ad3ceb16f079d3d5f0fbd348c94f9b9.png

2ef61f713b0b890279ab08e91a3dca3c.png

c2c16d4d81f4e74909e56521a4aa9cb2.png

cdc42ae3d24c5b42c76c7a62cdfb5624.png

获取街景ID

70c270ab015dcb1a366f72e7dfd0f564.png

b9da26592f7927e8f7df870173406a05.png

9a5a126008d2b3df1135e66b311cd85f.png

4、配置Web服务:

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

0028fdafe391cf7406060146113e08a9.png

5、调用参数列表:

① 基础参数

名称

类型

说明

pano

场景点svid

heading

0 - 360

偏航角,与正北夹角

pitch

-90 - 90

俯仰角

zoom

1 - 4

缩放级别

key

开发者key

② 功能开关

名称

类型

说明

nav

0:关闭 1:开启

导航功能,默认开启

poi

0:关闭 1:开启

重点POI,默认关闭

arrow

0:关闭 1:开启

前进后退箭头,默认开启

addr

0:关闭 1:开启

地址栏,默认开启

minimap

0:关闭 1:开启

平面小地图

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html5 调用本地街景,H5案例分享:在移动端调用腾讯街景 的相关文章

  • 虚拟机架云服务器,云服务器 虚拟机架设

    云服务器 虚拟机架设 内容精选 换一换 通过云服务器或者外部镜像文件创建私有镜像时 如果云服务器或镜像文件所在虚拟机的网络配置是静态IP地址时 您需要修改网卡属性为DHCP 以使私有镜像发放的新云服务器可以动态获取IP地址 本节以Windo
  • 安卓基础之Intent的用法

    Intent的用法 意图的分类和用法 隐式意图 通过指定一组数据或者动作实现 Intent intent new Intent intent setAction intent addCatogary intent setDataAndTyp
  • cim系统 是什么_CIM和IBM i:它是什么以及它如何工作

    什么是CIM 如果您对IBM i知识不熟悉CIM 那么您来对地方了 CIM提供了一种建模和公开管理信息的标准方法 从V5R4开始 通过加载IBM通用可管理性启用 UME 许可程序 在IBM i上提供了CIM 并且在IBM i 6 1和IBM
  • JavaScript 等待 body,frame,frameset,iframe,img,link,script,style加载完成操作

    body frame frameset iframe img link script style 标签有 onload事件 通过监听以上的 onload事件 可以达到 对于标签加载完成后在做一些事情 查看图片的所有属性 以及事件 conso
  • uniapp的那些坑

    1 selectedColor不起作用 1 查看位置是否写对 与lis同级 2 是否为16进制 selectedColor写的rgb不支持 3 是否被其他样式覆盖 其他地方也设置过selectedColor 可以全局搜索一下 2 pages
  • VSCode远程连接ubuntu服务器

    1 打开VSCode 安装插件 安装插件 汉化 方法如下 重启之后界面就都是中文了 因为我之前弄过了 如果你的已经是中文了 可以省去这一步 安装remote development插件 如下图 用于远程连接服务器 安装好之后 左侧多了一个
  • 计算机视觉(CV)方向今年招聘情况怎么样?是否已经人才过剩?

    编辑 Amusi https www zhihu com question 293700785 本文仅作为学术分享 如果侵权 会删文处理 计算机视觉 CV 方向今年招聘情况怎么样 是否已经人才过剩 https www zhihu com q
  • 实验五:LINUX 下C语言使用、编译与调试实验

    实验五 LINUX 下C语言使用 编译与调试实验 一 实验目的 练习并掌握Linux提供的vi编辑器来编译C程序 学会利用gcc gdb编译 调试C程序 学会使用make工具 二 实验内容 编写C语言程序 用gcc编译并观察编译后的结果 运
  • 接口的加密解密

    接口加密 1 接口参数加密 基础加密 2 接口参数加密 接口时效性验证 一般达到这个级别已经非常安全了 3 接口参数加密 时效性验证 私钥 达到这个级别安全性固若金汤 4 接口参数加密 时效性验证 私钥 Https 我把这个级别称之为金钟罩
  • iOS进阶_NSURLSession(二.断点续传)

    断点续传 从上一篇文章中 我们了解了使用NSURLSession进行文件下载 我们在其基础上继续探索NSURLSession的断点续传 在NSURLSession中 我们使用reumeData来存储下载的数据进度 import ViewCo
  • kali linux 报告工具集 faraday 忘记密码处理办法

    kali linux 报告工具集 faraday 忘记密码处理办法 第一步 切换到root 用户 执行命令 su root 第二步停止数据库服务 systemctl stop postgresql service 第三步重新启动数据库 sy
  • KMP 算法

    KMP 算法的核心是利用匹配失败后的信息 尽量减少模式串与主串的匹配次数以达到快速的匹配的目的 具体实现是通过一个next 函数来实现的 函数本身包含了模式串的局部匹配信息 KMP算法的时间复杂度O m n KMP 和 BF 唯一不一样的地
  • Pycharm如何配置解释器

    问题 安装Pycharm了就可以直接运行程序了吗 回答 不能 PyCharm是一种Python IDE 带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具 比如调试 语法高亮 Project管理 代码跳转 智能提示 自动完成
  • python-自定义函数(定义调用、默认参数、返回值)

    python 自定义函数 文章目录 python 自定义函数 初识函数 函数的定义与调用 函数的定义 参数列表 函数体 函数调用 默认参数 定义默认参数 默认参数的使用 默认参数的位置 默认参数为可变对象 默认参数为None 关键字参数传递
  • Linux系统管理-audit文件太多导致du -sh命令卡死

    1 问题现象 今日查询数据库文件系统的使用情况发现如下情况 du sh 卡死 进去下基层目录使用du sh 均未出现问题 2 问题分析 而在audit文件目录中使用du sh 命令时命令卡死 发现问题所在 使用ls查看audit目录的文件也
  • zsh: bad CPU type in executable: /usr/local/bin/git

    MAC安装nvm的时候报错zsh bad CPU type in executable usr local bin git 查找原因 通过where git可以看到有2个路径 一个 usr bin git一个 usr bin local g
  • 虚拟机--无法连接网络

    情况 运行命令 ifconfig 没有看到 ens33 网络 命令 ifconfig a 可以看到 ens33 其他 关闭防火墙 systemctl stop firewalld 查看状态 systemctl status firewall
  • HIT软件构造《设计模式》部分总结

    创造模式 创造模式关心的是对象类创造的过程应该遵循的原则 里氏替换原则 继承必须确保超类所拥有的性质在子类中仍然成立 里氏替换原则 Liskov Substitution Principle LSP 是面向对象的设计原则 通俗地讲 它指出了
  • 我放弃了VMware

    文章目录 哈哈哈 不得不说 有点儿标题狗的意思 不去写新闻真的屈才了 正如标题所说 我弃用了VMware 但是我使用上了WSL2 相对来说 wsl2使我不怎么担心我16G的内存不够用 其实 wsl也是虚拟技术的一种 但是相比VMware v

随机推荐

  • net start mysql80拒绝访问

    文章目录 1 问题描述 2 一次性解决方案 3 永久性解决方案 1 问题描述 问题描述 在我们使用dos窗口进行操作的时候 无论使用的是net start stop mysql80都会发生拒绝访问的问题 通常这个问题的发生都是因为大家把my
  • 国产信创服务器如何进行安全可靠的文件传输?

    信创 即信息技术应用创新 2018年以来 受 华为 中兴事件 影响 国家将信创产业纳入国家战略 并提出了 2 8 n 发展体系 从产业链角度 信创产业生态体系较为庞大 主要包括基础硬件 基础软件 应用软件 信息安全4部分构成 其中芯片 服务
  • ChatGPT知多少?小白扫盲,通俗易懂

    一 ChatGPT到底是什么 ChatGPT是由OpenAI 发布的自然语言模型 它的英文全称是 Chat Generative Pre trained Transformer 直译过来就是作为聊天使用的生成式预训练转换器 其中 Chat代
  • 此时不应有java_Java出现"此时不应有......."的错误

    今晚在安装weblogic的时候 双击运行startWebLogic cmd dos窗口一闪而过 随后将 startWebLogic cmd 拖进cmd窗口运行 显示 此时不应有 tools jar 然后我把环境变量CLASSPATH中的
  • H265视频转码H264视频

    LiveMedia视频平台提供H5网页web前端无插件视频码流 但目前主流浏览器和播放器都只支持H264的码流 但是随着编码技术的迭代 目前H265编码的视频已在安防行业得到了广泛的使用 平台仅支持H264需要客户修改前端的视频编码 这样会
  • html动态标题设计源码

    html酷炫动态发光标题 效果图如下 index html
  • 【spring boot logback】日志颜色渲染,使用logback-spring.xml自定义的配置文件后,日志没有颜色了...

    接着spring boot日志logback解析之后 发现使用logback spring xml自定义的配置文件后 日志没有颜色了 怎么办 官网处理日志链接 https logback qos ch manual layouts html
  • BeautifulSoup库

    BeautifulSoup安装 1 以管理员运行cmd 2 输入 pip install beautifulsoup4 BeautifulSoup库的基本元素 BeautifulSoup库的理解 BeautifulSoup库是解析 遍历 维
  • 【分享干货】Mac系统IDEA 安装教程

    IEEA 安装 什么是idea idea 介绍 idea官网 https www jetbrains com 外链图片转存失败 源站可能有防盗链机制 建议将图片保存下来直接上传 img Pynu6DTk 1654592966880 User
  • Java封装性(包含this关键字,构造器等)

    目录 一 封装性的含义 二 封装性的作用 三 封装性的体现 3 1 四种权限修饰符的介绍 3 2 分装性具体的实现 四 构造器的解释 4 1 构造器的作用 4 2 注意事项 4 3 构造器的举例说明 五 this关键字的使用 5 1 thi
  • jdk8的十大新特性

    了解jdk8的新特性首先要了解jdk7的新特新都有哪些方面增强 1 jdk语法上 1 1二进制变量的表示 支持将整数类型用二进制来表示 用Ob开头 1 2Switch语句支持String类型 1 3Try with resource语句 注
  • 欢欢喜喜: 在lenovo网站购T61的经历

    1月3日 在lenovo网站购T61的经历 一直以来对IBM的小黑情有独钟 不过考虑国内昂贵的价格和需求的迫切性不高 所以 也只是观望中 上次去米果的时候 看到lenovo网上卖的T61笔记本 标的价格比平时都低300 于是动了心 开始在
  • 使用 PullToRefresh 的总结

    前言 关于下拉刷新 上拉加载的框架现在有很多 这里奉上别人收集的一些框架 下拉刷新框架收集 但是笔者一直还在使用 PullToRefresh 个人觉得 PullToRefresh 使用起来还是比较简洁方便的 关于 PullToRefresh
  • unity-ugui-eventsystem

    EventSystem对象的说明 当我们在场景中创建任一UI对象后 Hierarchy面板中都可以看到系统自动创建了对象EventSystem 可以看到该对象下有三个组件 EventSystem StandaloneInputModule
  • 七天引爆社交新零售(助你提高十倍业绩)——前言

    2019年对于中小企业主 创业者 实体店主最大的机遇就是社交新零售 为什么这么说呢 随着日益上涨房租成本 人工成本的上升 实体生意利润空间越来越小了 而传统线上电商企业流量广告费也越来越贵了 大家一直在探索有没有一种低成本高收益的销售方式出
  • stream()转map转list、distinct()去重、判断空值、sorted排序正序多字段排序

    package demo io import demo api JavaBean Student import org junit platform commons util StringUtils import java util imp
  • 镜头快速精准反馈位置硬件环境搭建

    目录 概述 一 检测部分 1 原理图 2 PCB板 二 驱动部分 1 原理图 2 PCB板 概述 本篇只要介绍 硬件电路搭建 这次是项目的需要 重新捡起好多年没使用 Altium Designer 软件了 熟悉又陌生 经过2 3天时间 终于
  • 想要精通算法和SQL的成长之路 - 最长回文子序列

    想要精通算法和SQL的成长之路 最长回文子序列 前言 一 最长回文子序列 前言 想要精通算法和SQL的成长之路 系列导航 一 最长回文子序列 原题链接 首先 我们看下动态规划方程的定义 我们用dp i j 来代表 字符串s在下标区间为 i
  • Django连接MySQL数据库时出错:django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module: No mo

    基于python3解释器的虚拟环境中创建的Django项目 Django中默认连接的是SQLite3数据库 现更改为MySQL数据库 执行迁移文件时报错 django core exceptions ImproperlyConfigured
  • html5 调用本地街景,H5案例分享:在移动端调用腾讯街景

    在移动端调用腾讯街景 腾讯地图街景组件可以通过多种方式调起 来展示3D街景信息 腾讯街景API 是构建在v2版本上的全新应用接口 对于目的地 可以让用户足不出户 得到更直观 更真切 的身临其境的体验 比如 您可以就用在 房产 酒店 餐饮 娱