charles_wang8888
charles_wang8888

HTML5 geolocation API 获得用户当前地理位置

 HTML5 里面引入了geolocation的API可以帮助用户获得浏览器所在的地理位置，它不仅可以标示出当前的经纬度，还可以与google map API结合使用来在地图上标示出当前位置。

HTML代码，主要就是2大块，第一部分的容器用于放google地图和标示位置，第二部分用于显示精确的经纬度以及精度（误差）。

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <!-- 以下这段代码是googlemap官方建议的，它让用户禁止利用浏览器的放大缩小窗口功能，而使用googlemap自己的缩放功能 --> 
    5. 
   
   
   
   
  5. <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/> 
    6. 
   
   
   
   
  6. <title>在页面上使用Google Map，获取浏览器的当前位置</title> 
    7. 
   
   
   
   
  7.  
    8. 
   
   
   
   
  8. <!-- 因为页面上要使用到google地图，所以导入googlemap地图文件 --> 
    9. 
   
   
   
   
  9. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    10. 
   
   
   
   
  10.  
    11. 
   
   
   
   
  11. <!-- 这段js文件是我自己写的，用于利用HTML5的geolocation API获得当前位置，并且在google地图上标识出来 --> 
    12. 
   
   
   
   
  12. <script type="text/javascript" src="js/googlemap.js"></script> 
    13. 
   
   
   
   
  13.    
    14. 
   
   
   
   
  14. </head> 
    15. 
   
   
   
   
  15.  
    16. 
   
   
   
   
  16. <body onload="init()"> 
    17. 
   
   
   
   
  17. Hello,Google Map! 
    18. 
   
   
   
   
  18. <br> 
    19. 
   
   
   
   
  19. <!-- 这一个正方形区域是用来画google地图的 --> 
    20. 
   
   
   
   
  20. <div id="map"style="width: 400px; height: 400px"></div> 
    21. 
   
   
   
   
  21. <br> 
    22. 
   
   
   
   
  22. <!-- 这一个区域是用来显示你的位置信息的 --> 
    23. 
   
   
   
   
  23. <h3>您的浏览器显示了您当前的地理位置信息是:</h3> 
    24. 
   
   
   
   
  24. <p id="positionInfo"></p> 
    25. 
   
   
   
   
  25. </body> 
    26. 
   
   
   
   
  26.  
    27. 
   
   
   
   
  27. </html> 
    28.

javascript方法，主要就是用于绘制地图（以及标示位置），以及给出了当获取位置成功或者失败时候的回调函数定义：

  
  
  
  
    
   
   
   
   
  1. //这是初始化方法，用来绘制google地图 
    2. 
   
   
   
   
  2. function init() { 
    3. 
   
   
   
   
  3. console.log("entering the init() method"); 
    4. 
   
   
   
   
  4. //首先必须判断浏览器是否有geolocation属性，因为HTML5 才新增了这个属性，不是所有浏览器都支持 
    5. 
   
   
   
   
  5. if (navigator.geolocation) { 
    6. 
   
   
   
   
  6. //如果浏览器支持geolocation，则使用geolocation的getCurrentLocation方法来取得用户当前的地理位置， 
    7. 
   
   
   
   
  7. //并且在成功取得之后调用show_map()回调函数 
    8. 
   
   
   
   
  8. console.log(' Browser support geolocation '); 
    9. 
   
   
   
   
  9. navigator.geolocation.getCurrentPosition(show_map,handle_error ,null); 
    10. 
   
   
   
   
  10. } else { 
    11. 
   
   
   
   
  11. console.log(' Browser doesnt support geolocation '); 
    12. 
   
   
   
   
  12. } 
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14. } 
    15. 
   
   
   
   
  15.  
    16. 
   
   
   
   
  16.  
    17. 
   
   
   
   
  17. //这是一个回调函数，用于当geolocation成功取得用户浏览器所在的地理位置时候的响应，它吧所有的位置信息封装在position中 
    18. 
   
   
   
   
  18. //所以我们就需要解析position来取得用户的详细信息 
    19. 
   
   
   
   
  19. function show_map(position) { 
    20. 
   
   
   
   
  20.  
    21. 
   
   
   
   
  21. // 取得当前的地理位置 
    22. 
   
   
   
   
  22. var coords = position.coords; 
    23. 
   
   
   
   
  23.   
    24. 
   
   
   
   
  24. //Part 1; 显示用户的精确位置信息 
    25. 
   
   
   
   
  25. //取得页面上用于显示精确位置信息的组件 
    26. 
   
   
   
   
  26. var positionInfo=document.getElementById("positionInfo"); 
    27. 
   
   
   
   
  27. var positionString="经度: "+coords.longitude+"<br>"; 
    28. 
   
   
   
   
  28. positionString+="维度: "+coords.latitude+"<br>"; 
    29. 
   
   
   
   
  29. var altitude=coords.altitude; 
    30. 
   
   
   
   
  30. if( altitude!=null){ 
    31. 
   
   
   
   
  31. positionString+="海拔高度"+coords.altitude+"<br>"; 
    32. 
   
   
   
   
  32. } 
    33. 
   
   
   
   
  33. positionString+="经纬度精确到："+coords.accuracy+"米"+"<br>"; 
    34. 
   
   
   
   
  34. positionInfo.innerHTML=positionString; 
    35. 
   
   
   
   
  35. //Part 2; 在google地图上显示浏览器的当前位置 
    36. 
   
   
   
   
  36. // 设定地图参数，将用户的当前位置的维度和精度都设定为地图的中心点 
    37. 
   
   
   
   
  37. var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
    38. 
   
   
   
   
  38. var myOptions = { 
    39. 
   
   
   
   
  39. // 设定放大倍数 
    40. 
   
   
   
   
  40. zoom : 14, 
    41. 
   
   
   
   
  41. // 将地图的中心点设定为指定的坐标点 
    42. 
   
   
   
   
  42. center : latlng, 
    43. 
   
   
   
   
  43. // 指定地图的类型，这里选择的是街道地图 
    44. 
   
   
   
   
  44. mapTypeId : google.maps.MapTypeId.ROADMAP 
    45. 
   
   
   
   
  45. }; 
    46. 
   
   
   
   
  46. // 创建地图并在"map"div中显示，吧这个地图叫做map1 
    47. 
   
   
   
   
  47. var map1; 
    48. 
   
   
   
   
  48. map1 = new google.maps.Map(document.getElementById("map"), myOptions); 
    49. 
   
   
   
   
  49. // 在地图上创建标记 
    50. 
   
   
   
   
  50. var marker = new google.maps.Marker({ 
    51. 
   
   
   
   
  51. //标注刚才创建的标注点，因为标注点是由当前的经纬度设定的，所以表示了当前位置 
    52. 
   
   
   
   
  52. position : latlng, 
    53. 
   
   
   
   
  53. //标注在哪张地图上，我们创建了map1作为google map，所以标注在map1上 
    54. 
   
   
   
   
  54. map : map1 
    55. 
   
   
   
   
  55. }); 
    56. 
   
   
   
   
  56. // 设定标注窗口，并且指定该窗口的注释文字 
    57. 
   
   
   
   
  57. var infowindow = new google.maps.InfoWindow({ 
    58. 
   
   
   
   
  58. content : "这是Charles的浏览器的当前位置!" 
    59. 
   
   
   
   
  59. }); 
    60. 
   
   
   
   
  60. // 打开标注窗口 
    61. 
   
   
   
   
  61. infoWindow.open(map1, marker); 
    62. 
   
   
   
   
  62.  
    63. 
   
   
   
   
  63. } 
    64. 
   
   
   
   
  64.  
    65. 
   
   
   
   
  65.  
    66. 
   
   
   
   
  66.  
    67. 
   
   
   
   
  67. //这是第二个回调函数，用于当geolocation获取用户浏览器所在的地理位置失败时候的响应 
    68. 
   
   
   
   
  68. //error对象封装了所有的可能出现的无法获得地理位置的错误信息，并且HTML5为其预留了错误码，可以取值{1,2,3} 
    69. 
   
   
   
   
  69. function handle_error(error){ 
    70. 
   
   
   
   
  70. var errorTypes={ 
    71. 
   
   
   
   
  71. 1:'位置服务被拒绝', 
    72. 
   
   
   
   
  72. 2:'获取不到位置信息', 
    73. 
   
   
   
   
  73. 3:'获取信息超时' 
    74. 
   
   
   
   
  74. }; 
    75. 
   
   
   
   
  75. console.log(errorTypes[error.code] + ":,不能确定你的当前地理位置"); 
    76. 
   
   
   
   
  76. } 
    77.

 

要显示结果，必须让用户开启共享位置功能，因为这是隐私，我测试了下Opera 11和Firefox 10 ，Google Chrome都可以。

Opera 11开始就需要用户选择是否要共享地理位置：

然后要签一份用户协议：

 

 

对于Firefox浏览器，也是需要得到用户共享自己位置的许可：

 

 

最终，就可以显示用户当前位置了（实际是你的ip暴露了你的信息），比如我住在上海广兰路地铁站附近，所以显示结果如下：

 

 

你可能感兴趣的:(html5,geolocation,地理信息)

  • 超越传统！wangEditor编辑器如何实现excel、ppt、pdf及word一键导入？ 2501_90699780 编辑器excelpowerpointumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • 基于Geopandas的地理空间数据可视化与分析方法研究 一键难忘 信息可视化Geopandaspython
    地理空间数据可视化是数据科学中重要的应用之一。通过有效地展示地理信息，我们能够深入理解空间数据的分布和模式。Python的Geopandas库为地理空间数据处理和可视化提供了强大的支持，它基于pandas并集成了shapely、fiona等多个库，能够方便地进行地理数据的读取、处理和展示。本文将介绍如何使用Geopandas进行地理空间数据可视化，示范数据处理的基本流程，并通过具体的代码实例，深入
  • HTML 元素和有效 DOCTYPES 智慧浩海 HTMLhtml前端
    HTML元素-有效DOCTYPES下面的表格列出了所有的HTML5/HTML4.01/XHTML元素，以及它们会出现在什么文档类型(!DOCTYPE)中：HTML4.01/XHTML1.0TagHTML5TransitionalStrictFramesetXHTML1.1YesYesYesYesYesYesYesYesYesYesNoYesYesYesYesYesYesYesYesYesNoYes
  • Python 地图基础教程教程 小白教程 pythonpythonPython地图Python基础教程Python地图教程Python地图入门Python绘制地图Python地图源码
    文章目录前言1.环境准备1.1Python安装1.2选择Python开发环境1.3安装必要库二、绘制基本世界地图1.导入必要的库：2.加载世界地图数据：3.绘制地图：三、自定义地图样式1.按面积给国家着色：2.突出显示特定国家：四、添加地理信息1.显示国家名称：2.添加其他地理要素：五、保存地图前言地图在生活、科研、商业等诸多领域都有着广泛的应用，从日常出行的导航，到地理信息系统（GIS）中的数据
  • Python 视频爬取教程 小白教程 pythonPythonPython视频爬取教程Python视频爬取Python教程Python视频教程
    文章目录前言基本原理环境准备Python安装选择Python开发环境安装必要库示例1：爬取简单直链视频示例2：爬取基于HTML5的视频（以某简单视频网站为例）前言以下是一个较为完整的Python视频爬取教程，包含基本原理、不同网站的爬取示例以及注意事项。基本原理视频爬取本质上是模拟浏览器向服务器发送请求，获取包含视频信息的网页内容，解析出视频的真实下载地址，然后将视频文件下载到本地。一般会用到re
  • ArcGIS无插件加载（无偏移）在线天地图高清影像与街道地图指南 橘飞侠 arcgis
    在地理信息系统（GIS）的应用中，加载高清影像与街道地图对于地图制图、影像查阅、空间数据分析等工作至关重要。天地图作为官方出品的地图服务，以其标准的数据、较快的影像更新速度等特点受到广泛欢迎。以下是如何在ArcGIS中无插件加载（无偏移）天地图高清影像与街道地图的具体步骤。第一步：申请天地图Key访问天地图官方网站的地图服务API页面：http://lbs.tianditu.gov.cn/serv
  • 基于.NET MVC实现H5页面调用手机摄像头扫描二维码完整方案 Bart_Lu .netmvc
    一、前言在移动端Web开发中，二维码扫描功能已成为常见需求。本文将介绍如何在ASP.NETMVC框架下，通过HTML5技术调用手机摄像头实现二维码扫描功能，并提供完整的代码实现方案。二、技术选型前端库：使用ZXing-js（支持浏览器二维码解析）后端框架：ASP.NETMVC5浏览器API：MediaDevicesAPI三、实现步骤1.准备工作在MVC项目中引入所需库：html运行HTML2.创建
  • MySQL与达梦数据库空间查询差异详解：根据经纬度坐标查询范围 CarlowZJ 数据库mysql达梦数据库
    在地理信息系统中，经常需要根据地理位置数据进行查询。MySQL和达梦数据库（DM）都提供了空间函数来支持这类查询，但两者在处理空间函数时存在一些差异。本文将详细解释两个数据库中根据经纬度坐标查询范围的SQL语句，并说明这些差异。一、MySQL数据库查询语句解释sql复制SELECT*FROMbase_channelsWHEREIS_SELECT='1'ANDST_Contains(ST_GeomF
  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？ 2501_90699640 金融vue.jswordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 前端学习路线：从零基础到初级工程师的完整指南（2025最新版） 超浪的晨 前端学习
    前言作为连接设计与技术的核心岗位，前端开发在数字化时代持续释放强大生命力。本路线图专为初学者设计，通过「渐进式学习路径」+「实战项目驱动」的模式，助你系统掌握现代前端开发技能体系。一、基础筑基阶段（4-6周）三大核心基石HTML5语义化标签（）表单验证与多媒体支持SEO基础与无障碍访问CSS3Flex/Grid布局（重点掌握）动画与过渡（@keyframes+transition）响应式设计（媒体
  • deepseek接入的GIS地图应用，真的好用！还得是大厂 GIS思维 AI与GISdeepseek百度地图腾讯地图人工智能ArcGISPro
    最近deepseek火的一塌糊涂，各个行业，系统等都宣布接入deepseek大模型。测绘地理信息、GIS行业也不例外，也看到了几个宣布系统接入了deepseek大模型。但是真正落地结合deepseek应用的基本没有。最近，我一开百度地图App和腾讯地图App，着实让我眼前一亮。百度地图、腾讯地图APP都接入了deepseek大模型（打不过就加入），可以在地图的基础上结合deepseek做一些场景的
  • 2025前端面试题超全面解析（附答案与深度扩展） 北辰alk 前端前端
    文章目录一、HTML篇（扩展版）1.**HTML5语义化标签的实际应用场景**2.**WebComponents实战：如何封装一个自定义按钮组件？**3.**WebWorker的用途与限制**二、CSS篇（扩展版）1.**CSS盒模型详解：border-boxvscontent-box**2.**CSS动画性能优化技巧**3.**CSS预处理器（Sass/Less）核心功能对比**三、JavaSc
  • Cesium-三维地球可视化应用 程序员_三木 Web3dwebglThree.js
    什么是CesiumJS？CesiumJS是一个强大的开源JavaScript库，用于构建高性能的3D地图和地球可视化应用。无论你是从事地理信息系统（GIS）开发、数据可视化，还是需要展示空间数据，CesiumJS都能提供灵活的解决方案。它以WebGL为核心，专注于大规模地理空间数据的实时渲染。CesiumJS是Cesium平台的核心部分，与Cesiumion等服务无缝集成，支持从数据管理到可视化的
  • Cesium实时建筑物三维可视化与地理信息系统（GIS） OvzStream GIS
    近年来，随着科技的不断发展，地理信息系统（GIS）和三维可视化技术在城市规划、建筑设计和地理空间分析中扮演着越来越重要的角色。在这篇文章中，我们将探讨如何利用Cesium库实现实时建筑物的三维可视化与GIS集成，为读者展示如何通过编写代码来实现这一功能。首先，我们需要了解Cesium是什么。Cesium是一个开源的JavaScript库，专门用于创建基于Web的地理信息系统应用程序。它提供了强大的
  • HTML深度解读 Small踢倒coffee_氕氘氚 经验分享笔记
    ##引言HTML（HyperTextMarkupLanguage）是构建网页的基础语言。自1991年由TimBerners-Lee发明以来，HTML已经经历了多次版本更新，从HTML1.0到HTML5，每一次更新都带来了新的特性和功能。本文将深入探讨HTML的核心概念、结构、标签、语义化以及HTML5的新特性。##一、HTML的核心概念###1.1什么是HTML？HTML是一种标记语言，用于创建和
  • PyQt6嵌入HTML5内容教程 mosquito_lover1 pythonpyqthtml5
    在PyQt6中嵌入HTML5内容可以通过QWebEngineView实现。QWebEngineView是一个基于Chromium的浏览器引擎，能够渲染HTML5内容。以下是一个简单的示例，展示如何在PyQt6中嵌入HTML5页面：1.安装PyQt6和PyQt6-WebEnginepipinstallPyQt6PyQt6-WebEngine2.创建PyQt6应用程序并嵌入HTML5内容imports
  • 《恐龙餐厅菜单页面代码说明文档》 欣然～ html5
    一、整体概述此HTML文件构建了一个恐龙餐厅的菜单页面，用户能够浏览菜品、将菜品添加到购物车，并进行支付操作。页面运用HTML搭建结构，CSS进行样式设计，JavaScript实现交互功能。二、HTML结构1.文档头部（）html恐龙餐厅菜单/*CSS样式代码*/：声明文档类型为HTML5。：指定文档语言为中文（中国大陆）。：设置字符编码为UTF-8，确保中文等字符能正确显示。：让页面在不同设备上
  • 基于html5QrCode实现的H5扫码功能（uni-app v2版本） _虾仁不眨眼_ 移动端H5uni-apphtml5
    1.安装（选择一种方式）使用npmHtml5Qrcodenpm链接npmihtml5-qrcode直接引入html5-qrcode.min.js文件（本例使用此方法）2.扫码组件代码（先引入Html5Qrcode资源）exportdefault{name:'Scan',model:{props:'value',event:'close'},props:{value:{type:Boolean,de
  • input限制只能输入正整数 _虾仁不眨眼_ javascripthtml5
    要限制input元素只能输入正整数，可以使用以下几种方法：1.使用HTML5的type="number"属性这种方式可以限制输入框只接受数字输入，并且可以通过min和step属性设置最小值和步长。2.使用正则表达式进行输入验证使用@input事件监听输入框的输入事件，并在validateInput方法中使用正则表达式过滤掉非数字和非正整数的字符。//html//jsmethods:{validat
  • 移动端Canvas实现手写签名 不知名靓仔 canvas
    引言在移动应用开发中，手写签名功能的集成已经成为许多业务场景的标配，比如电子合同签署、医疗记录确认或是物流配送签收等。本文将详细阐述如何在移动端实现手写签名，包括技术选型、具体实现步骤以及优化建议，帮助开发者快速上手并构建高质量的手写签名体验。技术选型1.使用CanvasAPIHTML5的CanvasAPI提供了在网页上绘制图形的能力，包括路径、文本、图像等，非常适合用来捕捉和展示手写签名。在移动
  • 最新微信小程序面试题集结 江湖二哥 微信小程序前端面试小程序
    1、微信小程序与H5的区别?第一条是运行环境的不同传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。第二条是开发成本的不同只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BuG第三条是获取系统级
  • QT编程之QGIS byxdaz QTqt开发语言
    一、QGIS介绍QuantumGIS（QGIS）是开源地理信息系统桌面软件，使用GNU（GeneralPublicLicense）授权，属于OpenSourceeospatialFoundation（OSGeo）的官方计划。在GNU授权下，开发者可以自行检阅与调整程序代码，并保障让所有使用者可以免费且自由地修改程序。QGIS的目标是成为一个GIS系统，提供常见的功能与特征。借着核心特征提供基本功能
  • HTML5 Web SQL froginwe11 开发语言
    HTML5WebSQL引言随着互联网技术的飞速发展，HTML5作为新一代的网页技术，已经逐渐成为网页开发的主流。在HTML5中，WebSQL是一种轻量级的数据库存储技术，它允许开发者直接在网页中存储数据。本文将详细介绍HTML5WebSQL的概念、特点、应用场景以及使用方法。一、WebSQL概念WebSQL是一种轻量级的数据库存储技术，它允许开发者使用SQL语句在网页中存储数据。WebSQL数据库
  • HTML5前端页面设计,HTML5网页前端设计 设计师马丁 HTML5前端页面设计
    HTML5网页前端设计编辑锁定讨论上传视频《HTML5网页前端设计》是2017年6月清华大学出版社出版的图书，作者是周文洁。书名HTML5网页前端设计作者周文洁ISBN9787302463597定价59.50元出版社清华大学出版社出版时间2017年6月HTML5网页前端设计内容简介编辑本书是一本从零开始学习的Web前端开发教材，无须额外的基础。全书以项目驱动为宗旨，详细介绍了HTML5、CSS3与
  • HarmonyOS NEXT 添加地理围栏 架构教育
    添加一个围栏，并订阅地理围栏事件，地理围栏就是虚拟地理边界，当设备进入、离开某个特定地理区域时，可以接收自动通知和警告目前仅支持圆形围栏，并且依赖GNSS芯片的地理围栏功能，仅在室外开阔区域才能准确识别用户进出围栏事件geofence:geoLocationManager.Geofence中的coordinateSystemType表示地理围栏圆心坐标的坐标系,APP应先使用getGeofence
  • html5使用本地sqlite数据库 小祁爱编程 sqlitehtml5bigdata
    html5使用本地sqlite数据库本地数据库概述在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序性能，减轻了服务器的负担，使用Web时代重新回到了“客户端为重、服务器端为轻”的时代。HTML5中内置了两种本地数据库，一种是SQLite,一种是indexedDBSQLite数据库使用操作本地数据库的
  • 第五章：HTML5 大升级：解锁未来技能 我自纵横2023 HTML教程html5前端html
    第五章：HTML5大升级：解锁未来技能5.1语义化标签的「身份认证」一、语义化概念理解在HTML的旧时代，我们就像一群建筑工人，只能用一些通用的和标签来搭建网页，就好比用千篇一律的砖块盖房子，虽然能把房子盖起来，但很难从外观上看出房子的各个部分是做什么用的。而HTML5引入的语义化标签，就像是给每一块砖块都赋予了特殊的形状和用途，让网页的结构变得一目了然，就像给每个房间都贴上了清晰的标签，告诉搜索
  • 电力行业中实现“电力一张图” 可行方案 小赖同学啊 人工智能智能硬件能源物联网
    在电力行业中实现“电力一张图”，需构建覆盖全业务场景的统一可视化平台，整合电网资源、设备状态、运行数据及地理信息，实现电力系统的数字化、智能化管理。以下是具体的技术实现方案：一、系统架构设计采用分层架构，涵盖数据采集、通信、处理、可视化及应用层：感知层设备部署：在变电站、杆塔、线路、分布式能源等节点部署智能传感器（如温湿度传感器、振动传感器、电流互感器）、智能终端（如FTU/DTU/TTU）、无人
  • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
    前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
  • 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
    下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
  • web缓存基础：术语、http报头和缓存策略 dalan_123 Web
    对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
  • crontab 问题 周凡杨 linuxcrontabunix
      一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
  • 让tomcat支持2级域名共享session g21121 session
    tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
  • web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
      ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
  • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
    #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
  • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
    如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
  • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
    来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
  • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
        创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
  • 多线程基础知识 bijian1013 java多线程threadjava多线程
    一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
  • fastjson简单使用实例 bijian1013 fastjson
    一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
  • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
    Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
  • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
    1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
  • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
    linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
  • java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
    public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
  • linux 系统相关命令 candiio linux
    系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
  • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
         一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
  • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
    几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
  • java乱码问题 dashuaifu java乱码问题js中文乱码
    swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
  • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
    cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
  • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
    2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
  • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
    转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
  • 手势滑动销毁Activity gundumw100 android
    老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
  • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
    效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
  • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
    最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
  • Calender不是单例 men4661273 单例Calender
             在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
  • 线程内存和主内存之间联系 qifeifei java thread
    1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
  • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
    原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
  • erlang 部署 wudixiaotie erlang
    1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他