专栏首页智慧城市Web开发---单页面应用(签到日报)
原创

Web开发---单页面应用(签到日报)

疫情前期,员工分布在各个地区,需要上报个人的健康状态和位置信息,于是做了一个单页面应用(当时钉钉和微信上的健康上报模板还没出现)

操作流程

进入页面时使用百度地图API定位接口首先定位其位置(经纬度和地址),并弹窗显示。

弹窗确定后进入页面

第一步,点击芳名,弹窗选择“我是谁”。标题显示今天已签到人数,姓名列表中背景绿颜色的是已签到人员,背景蓝颜色是浏览器cookie保存的“我的名字”,方便下次在众多姓名中一眼找出来自己的名字。

选择名字点击确定,第一个菜单显示自己名字,依然可以点击它弹窗更换名字。

第二步,百度地图定位接口可能定位不准确(显示错误)或不精确(不详细),这时候可以点击地址菜单,在弹窗中的地图中手动调整位置。

今天已签到人员在地图上将以红色图标显示。

平移缩放地图时找到地图上的蓝色图标(自己的位置)

如果位置显示错误或不精确,可以拖拽此图标更改调整。

调整后点击确定,弹窗显示调整后的位置,点击确定后地址菜单显示为自己调整后的地址(该过程使用百度地图API来地理编码)

最后在自己的表单中填写信息提交。

同时当天可以多次提交更新。

在这个页面可以滚动查看所有人所填写的表单。选择自己名字后,自己的表单显示在第一个,只能保存更改自己的表单

下一篇文将介绍查看自己的历史签到信息和查看所有人的历史签到信息。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 高质量编码-地图弹窗

    此文介绍arcgis js api信息弹窗infoWindow的setContent方法

    MiaoGIS
  • Web开发---单页面应用(签到日报--历史统计)

    疫情前期,员工分布在各个地区,需要上报个人的健康状态和位置信息,于是做了一个单页面应用(当时钉钉和微信上的健康上报模板还没出现)

    MiaoGIS
  • 高质量编码-实现基于html的参数配置

    Web前端编程中为了方便代码的复用性,扩展性和易读性,往往需要配置参数。现在多数都是通过json文件来配置。往往人们过于关注表面,优化的根本是业务的优化,代码本...

    MiaoGIS
  • 在TKE上新建托管集群

    腾讯云容器服务(Tencent Kubernetes Engine ,TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务

    马凌鑫
  • 腾讯云-云市场"特色应用"镜像 实践部署整理文档

    本文是对腾讯云云市场架构升级进行的镜像应用部署工作整理,并且将镜像部署过程中实践部署关键截图整理成如下文档,供亲们观看参考,有兴趣的亲可以点击进入...

    TCS-F
  • 腾讯云服务器产品1折起

    https://cloud.tencent.com/redirect.php?redirect=1034&cps_key=0fbfa5629eb50746faf...

    用户4001396
  • Apache Tomcat AJP协议漏洞分析(CVE-2020-1938)

    本篇文章主要针对于Apache Tomcat Ajp(CVE-2020-1938)漏洞进行源码分析和漏洞利用,顺便通过这个漏洞来学习JAVA代码审计。

    半月弧
  • Dual Problem & KKT

    西红柿炒鸡蛋
  • TKE上如何扩容PVC大小?

    此专栏是为了“补货”一些官网没有的操作文档,大家走过路过,可以留言告诉我,哪里写的不清不楚的地方,洒家给他整明白了、

    pengsiryan
  • TensorFlow 安装GPU版本

    TensorFlow 有两个版本:CPU 版本和 GPU 版本。GPU 版本需要 CUDA 和 cuDNN 的支持,CPU 版本不需要。如果你要安装 GPU 版...

    Centy Zhao

扫码关注云+社区

领取腾讯云代金券