PhotoSphereViewer 全景图

1网站地址:http://photo-sphere-viewer.js.org/markers.html#demo

2参数中文地址:https://www.cnblogs.com/big-tree/p/5933437.html

使用方法:

/*** Initialize the viewer*/
var PSV = new PhotoSphereViewer({ // main configuration panorama: rootURL + '/assets/Bryce-Canyon-National-Park-Mark-Doliner.jpg', container: 'photosphere', loading_img: rootURL + '/assets/photosphere-logo.gif', time_anim: false, caption: 'Bryce Canyon National Park <b>&copy; Mark Doliner</b>', default_fov: 70, default_lat: 0.3, mousewheel: false, size: { height: 500 }, // list of markers markers: [ { // image marker that opens the panel when clicked id: 'image', longitude: 5.69810, latitude: -0.13770, image: rootURL + '/assets/pin-blue.png', width: 32, height: 32, anchor: 'bottom center', tooltip: 'A image marker. <b>Click me!</b>', content: document.getElementById('lorem-content').innerHTML }, { // html marker with custom style id: 'text', longitude: 0, latitude: 0, html: 'HTML <b>marker</b> &hearts;', anchor: 'bottom right', style: { maxWidth: '100px', color: 'white', fontSize: '20px', fontFamily: 'Helvetica, sans-serif', textAlign: 'center' }, tooltip: { content: 'An HTML marker', position: 'right' } }, { // polygon marker id: 'polygon', polygon_px: [3184, 794, 3268, 841, 3367, 1194, 3327, 1307, 3065, 1221, 3097, 847], svgStyle: { fill: 'rgba(200, 0, 0, 0.2)', stroke: 'rgba(200, 0, 50, 0.8)', 'stroke-width': '2px' }, tooltip: { content: 'A dynamic polygon marker', position: 'right bottom' } }, { // circle marker id: 'circle', circle: 20, x: 2500, y: 1000, tooltip: 'A circle marker' } ] }); /** * Create a new marker when the user clicks somewhere */ PSV.on(

转载于:https://www.cnblogs.com/lst619247/p/8065029.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368421.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常用Lunix命令

计算机 1.硬件系统 输入单元、输出单元、算术逻辑单元、控制单元、记忆单元 中央处理单元&#xff1a;CPU&#xff08;算术逻辑单元、控制单元&#xff09; 电源、主板、CPU、内存&#xff08;RAM&#xff09;、硬盘、&#xff08;声卡、显卡、网卡&#xff09;&#xff08;集成…

angularJS constant和value

angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。 相同点是&#xff1a;都可以接受两个参数&#xff0c;name和value。 区别&#xff1a; 1.constant(name,value)可以将一个已经存在的变量值注册为服务&#xff0c;并将其注入到应用的其他…

让我们编写一个文档样式的Web服务

您可能知道&#xff0c;我们可以使用四种主要的Web服务样式。 它们如下&#xff1a; 文件/文学 包装的文件/文学 RPC /编码 RPC /文字 当然&#xff0c;现在不建议使用RPC /编码样式。 如果您有兴趣&#xff0c;可以在此处找到这篇非常全面的文章&#xff0c;以了解不同的…

linux 进入容器,查看和关闭进程

1&#xff0c;linux 查询容器 ID&#xff1a; docker ps 2&#xff0c;进入容器&#xff08;退出 exec 命令用&#xff1a;[ctrlD] &#xff0c;不会终止容器运行。退出 top 命令&#xff1a;ctrl C&#xff09; docker exec -it c39c9d3898c0 /bin/bash 3&#xff0c;查询进程…

mysql表单查询_MySQL表单集合查询

表单查询简单查询SELECT语句查询所有字段指定所有字段&#xff1a;select 字段名1,字段名2&#xff0c;...from 表名;select * from 表名;查询指定字段select 字段名1,字段名2&#xff0c;...from 表名;按条件查询带关系运算符的查询SELECT 字段名1,字段名2,……FROM 表名WHERE…

解决阿里云OSS跨域问题

解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次&#xff0c;第一次通过img标签进行&#xff0c;第二次通过异步加载获取。第一次请求到图片&#xff0c;浏览器会进行缓存&#xff0c;随后再进行异步请求&#xff0c;保存跨域失效。 错误信息如下&#xff1a…

css之hover改变子元素和其他元素样式

参考地址&#xff1a;链接 表示下一级元素&#xff0c;>表示子元素 1 <!DOCTYPE html>2 <html>3 <head lang"en">4 <meta charset"UTF-8">5 <title></title>6 </head>7 8 <style>9 #a {co…

将JacpFX客户端与JSR 356 WebSockets一起使用

JSR 356 WebSockets是即将发布的JEE 7版本中令人兴奋的新功能之一&#xff0c;并且在其参考实现中包括Server-和Client API。 这使其非常适合在客户端与JavaFX集成。 JacpFX是JavaFX之上的RCP框架&#xff0c;它使用基于消息的方法与组件进行交互。 这种基于消息的方法使集成We…

nagios check_mysql uptime_nagios使用check_mysql监控mysql

如果没有check_mysql插件&#xff0c;需要安装Mysql数据库1、建立专用数据库&#xff1a; [rootsvr3 ~]#mysql -u root -pEnter password:Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL connection id is 51910Server version: 5.5.3-m3-log Source di…

《精通Spring4.X企业应用开发实战》读后感第七章(AOP概念)

转载于:https://www.cnblogs.com/Michael2397/p/8068486.html

XHTML与HTML的区别

XHTML的语法较为严谨&#xff0c;拥有一定的规则&#xff0c;如果不遵循规则的话容易出错。但也不必太过担心&#xff0c;因为XHTML的规则并不太难&#xff0c;它和HTML4.01标准没有太多的不同。 需要注意的是以下几点&#xff1a; 1.XHTML标签必须被正确的关闭&#xff0c;即…

EC2上的ElasticSearch不到60秒

好奇地看到所有ElasticSearch轮奸是关于什么的&#xff1f; 想在没有大量肘部油脂的情况下看到它吗&#xff1f; 然后&#xff0c;朋友&#xff0c; 别再犹豫了-不到60秒&#xff0c;我将向您展示如何在AWS AMI上安装ElasticSearch 。 您首先需要一个AWS账户以及一个SSH密钥对…

Material使用04 MdCardModule和MdButtonModule综合运用

设计需求&#xff1a;设计一个登陆页面 1 模块导入 1.1 将MdCardModule和MdButtonModule模块导入到共享模块中 import { NgModule } from angular/core; import { CommonModule } from angular/common; import { MdSidenavModule, MdToolbarModule,MdIconModule,MdButtonModule…

mysql子分区多少层_MYSQL子分区修剪

我有一个MYSQL表与分区的年份和子分区的月份。MYSQL子分区修剪CREATE TABLE ptable (id INT NOT NULL AUTO_INCREMENT,name varchar(100),purchased DATETIME NOT NULL,PRIMARY KEY (id, purchased))PARTITION BY RANGE(YEAR(purchased))SUBPARTITION BY HASH(MONTH(purchased)…

65. Valid Number

Validate if a given string is numeric. Some examples:"0" > true" 0.1 " > true"abc" > false"1 a" > false"2e10" > true 判断字符串是否代表了有效数字。 这道题有点坑&#xff0c;情况比较多…… 1 cl…

python实现bp神经网络对csv文件进行数据预测

参考资源&#xff1a; sklearn库 bp神经网络[从原理到代码一篇搞定]&#xff08;2&#xff09;_sklearn 神经网络-CSDN博客 十分钟上手sklearn&#xff1a;安装&#xff0c;获取数据&#xff0c;数据预处理 - 知乎 (zhihu.com) 一个实例讲解如何使用BP神经网络(附代码) - 知…

html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切

众所周知&#xff0c;一般的屏蔽的方法是用JS来编写的脚本&#xff0c;但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制。 禁止右键 οncοntextmenu"return false" 禁止复制和剪切&#xff1a; οncοpy"return false;" oncut"return fa…

Spring MVC:表单处理卷。 4 –单选按钮

在软件开发领域&#xff0c;单选按钮是图形用户界面的重要组成部分。 Spring MVC标签库为此表单元素提供了特殊标签。 更确切地说&#xff0c;有两个标签用于此目的&#xff1a;单选按钮&#xff0c;单选按钮。 两者对于特定任务都是有用的。 如您所知&#xff0c;我将在帖子中…

点击时候确定某个元素 js_某空气质量监测平台 JS反爬

目标&#xff1a;中国空气质量在线监测分析平台|城市分析 参考CSDN中文章&#xff0c;记录一下学习过程通过切换城市&#xff0c;页面数据是通过 Ajax 加载的&#xff0c;数据接口&#xff1a;https://www.aqistudy.cn/apinew/aqistudyapi.php请求的POST Data、返回的数据都被加…

HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚动、URL编码、表格、表单、GET和POST

URL地址 就是我们所说的网址&#xff1a;www.jd.com 浏览器内核&#xff0c;渲染引擎 Ie内核&#xff1a;triteent 谷歌/欧鹏&#xff1a;blink 火狐&#xff1a;gecko 苹果&#xff1a;webkit 渲染引擎是出现兼容性的根本问题 -html概念:hyper Text Markup Languag…