架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 286|回复: 2

[Angular] angular 7某个div(地图)全屏教程

[复制链接]
跳转到指定楼层
楼主
发表于 2019-5-21 10:39:45
zu
以前写过一些div全屏的教程,都是纯html、js网页,这次框架使用的是angular,如何实现某个div全屏呢?文中是让地图的所处的div全屏,效果图如下:



以前的文章:

html5  判断是否处于全屏状态
https://www.itsvse.com/thread-3807-1-1.html
(出处: 架构师_程序员)
html5 退出全屏事件,监听esc按键事件
https://www.itsvse.com/thread-3800-1-1.html
(出处: 架构师_程序员)
百度地图全屏代码(div全屏代码)
https://www.itsvse.com/thread-3801-1-1.html
(出处: 架构师_程序员)

使用screenfull.js全屏插件,地址:https://github.com/sindresorhus/screenfull.js

npm安装:

  1. npm install screenfull
复制代码

angular 7引入插件:

  1. import * as screenfull from 'screenfull';
  2. import {Screenfull} from 'screenfull';
复制代码

html页面地图代码:

  1. <div id="mainmap" style="width:100%;height:100%;">
  2.   ...
  3.         <div class="p-2 flex-fill">
  4.                       <span class="fa fa-television" (click)="onClickScreenFull();"></span>
  5.             </div>
  6.         ...
  7. </div>
复制代码

触发onClickScreenFull事件,使该div全屏,ts脚本代码如下:

游客,如果您要查看本帖隐藏内容请回复


HTML5 Fullscreen API in Angular.js 插件也可以实现全屏效果,我这里就不测试了,地址:https://github.com/hrajchert/angular-screenfull

参考资料:https://github.com/sindresorhus/screenfull.js/issues/126




上一篇:请教 java 操作 rabbitmq ,basicQos() 无效问题
下一篇:常用开源许可协议(GPL、BSD、MIT、Mozilla、Apache)介绍
帖子永久地址: 

架构师_程序员 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与架构师_程序员享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和架构师_程序员的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、架构师_程序员管理员和版主有权不事先通知发贴者而删除本文

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
沙发
发表于 2019-5-21 12:49:59
mark一下
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
回复

使用道具 举报

板凳
发表于 2019-6-20 15:56:10
mark一下
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2019-7-22 05:53

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表