企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站开发

Website development

网站开发如何使用HTML5来确定用户的位置

发布时间:2016-12-07 09:41:22

TAGS:网站开发

定位是一个HTML5提供的令人兴奋的特点。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使用一些相对简单的JavaScript代码,你可以创建Web应用程序来确定用户的位置,各方面包括经度、纬度、海拔高度以及更多。一些Web应用程序,甚至可以通过长期监测用户的位置提供导航功能,结合地图系统如谷歌地图API。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如同所有的HTML5的功能,你还不能依靠浏览器支持。在浏览器支持的存在,它的变化在深度和一致性。基本上,你需要为他们的浏览器不完全支持HTML5的用户选择功能。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在本篇文章中,我们将通过建立用户定位的基本知识。在实践中,浏览器可以从多个来源获得的数据。例如,它可能是GPS数据在移动设备或者简单的基于IP的数据的任何设备连接到因特网的地址。然而,你的代码不需要关心这些细节,你可以简单地检索和使用位置数据为自己的项目的目的。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<a href=https://www.yzlink.cn target=_blank class=infotextkey>网站开发</a>如何使用HTML5来确定用户的位置.jpgHQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

HTML5 WEB页HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联


HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使用下面的代码来创建你的HTML5页面概述:HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngHQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们将地理定位功能的JavaScript在网页的头部脚本部分和一些基本的HTML元素的测试和演示功能的主体部分。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

HTML演示元素HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联


HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

添加以下标记HTML主体部分:HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngHQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

你可以打电话给你的地理定位功能,在任何时间,如当页面加载时,或与jQuery文档准备函数相结合。为了演示,我们将使用按钮来调用函数,将位置数据进DIV元素,其中有一些简单的占位符文本在它初。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

得到位置的函数HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngHQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们将使用来确定用户位置的主要方法是getposition方法添加以下函数在脚本部分在您的网页的头:HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

功能getuserlocation(){/ /检查定位对象的支持,如果得到的位置如果(navigator.geolocation)navigator.geolocation.getcurrentposition(displaylocation,displayerror);其他的(document.getelementbyid“位置”).innerHTML =“对不起,您的浏览器不支持地理位置!”;}HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这个功能被称为用户单击按钮时。代码首先检查导航定位的对象是存在的,这意味着浏览器支持。如果定位对象的支持,该代码使用它来调用getCurrentPosition方法HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这个getCurrentPosition方法需要两个参数指示回调函数。第一个是一个函数调用时的地理定位数据的接收,后者是一个函数,如果返回错误而不是打电话。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果定位对象不支持的功能,简单的写一个错误消息的网页DIV元素HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当一个网站第一次试图获取用户的位置数据,用户的浏览器会提示他们确定他们是否同意分享他们的数据。该功能只会如果他们同意进行。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

显示位置功能HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngHQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

接下来我们需要实现的功能包括对第一个参数getCurrentPosition方法调用。此功能将通过用户的位置数据时,浏览器接收到它。在你添加以下getuserlocation功能:HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

功能displaylocation(位置){/ /建立文本字符串包括通过参数坐标数据VaRdisplayText =“用户纬度”position.coords.latitude“度”position.coords.longitude;//显示字符串的演示(document.getelementbyid“位置”).innerHTML = displayText;}HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

该代码首先创建一个变量,构建了一个字符串的位置的位置参数包含经度和纬度数据。然后函数写这页以及一些信息文本。在你自己的网站,你可以使用数据的一些更有用的目的,而不是写它的页面–这只是示范。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

误差函数HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngHQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有很多的事情可以去错了,使用地理定位功能时。用户可能不同意分享他们的位置数据,浏览器可能无法检索数据,可能会有一个超时错误其他一些未指明的问题。因此我们需要添加一个函数来处理错误,使用我们指定为第二参数的名称getCurrentPosition方法在你添加以下函数displaylocation功能:HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

功能displayerror(错误){/ /得到一个参考的HTML元素写作的结果VaRlocationElement = document.getElementById(“位置”);/ /找出错误我们有相应的输出信息开关(错误代码){案例error.PERMISSION_DENIED: locationElement.innerHTML =“拒绝访问”;打破;案例error.POSITION_UNAVAILABLE: locationElement.innerHTML =“位置数据不可用”;打破;案例error.TIMEOUT: locationElement.innerHTML =“位置请求超时”;打破;案例error.UNKNOWN_ERROR: locationElement.innerHTML =“出现未知错误”;打破;默认: locationElement.innerHTML =“谁知道发生了什么事…”;打破;} }HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这个函数接收到的错误数据的地理位置要求如下。该函数首先引用页DIV元写适当的错误消息到。该消息是针对特定性质的错误使用switch语句。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

考虑和选择HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngHQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

上述功能覆盖获取用户位置数据的基础,但有巨大的潜力在这里。你可以使用检索用户的位置数据来显示用户的位置在地图上通过谷歌地图API,主要通过建立数据变量到一个自定义的URL加载到一个HTML页面中的图像元素。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

你也可以使用watchpostion跟踪用户的位置和速度作为他们移动的方法,虽然这是有限精度的数据不是来自GPS的移动设备上,例如,如果它是来自该地区的无线网络数据。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这些功能保证Web开发的一个有趣的未来。然而,他们的成功不仅取决于浏览器的支持,而且用户的喜好和硬件特点。我们将不得不等待更长的时间才能真正得到好的HTML5,但它肯定是值得期待的。HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联


HQx北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,6959,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号