咨询电话:024-31891684

pg电玩城-pg电子麻将胡了2试玩|注册|登录 |

html 5开发:地理位置定位指南-pg电玩城

 

html 5开发:地理位置定位指南当前位置:pg电玩城-pg电子麻将胡了2试玩>主要服务>网站制作>html

地理定位是html5提供的最令人激动的特性之一。

用相对简单的javascript代码,可以创建出能确定用户地理位置详细信息的web应用,包括经纬度以及海拔等。一些web应用甚至能通过监控用户位置随时间的移动来提供导航功能,其中还综合了googlemaps api这样的地图系统。

和所有html5的功能一样,你还不能依赖浏览器提供支持。而在浏览器提供支持的地方,它在深度和持续性上会有变化。本质上,你需要为那些浏览器不能为html5提供完全支持的用户提供替代功能。

在这篇教程里,我们会了解一些创建用户位置信息的基本知识。实际操作中,浏览器可能从多处获取数据。例如,可能是移动设备的gps数据或是任意联网设备上的ip地址数据。不过,你的代码不需要考虑这些细节,你只需检索和使用位置数据。

html5 web 页面

使用下列代码创建html5页面的框架:

<html> 

<head> 

<script> 

/*locationfunctionshere*/  

script> 

head> 

<body> 

body> 

html> 

我们将javascript地理定位函数放到页面标头脚本的位置,还会放置一些用于测试和演示主题区功能的基本html要素。

html演示要素

向html主体部分添加下列markup:

<input type="button"value="get location" onclick="getuserlocation()"/> 

<div id="locationdata"> 

location data here  

div> 

可以随时调用地理位置函数,如页面加载时或是与jquery文档准备函数合在一起时。为了更好地进行演示,我们使用按钮调用函数而且会把位置数据写入div要素中,div要素最初就有一些简单的占位符文本。

获取位置函数

getposition方法是我们用来确定用户位置的主要方法。在页面标头的脚本区域添加下列函数:

functiongetuserlocation(){  

//checkifthegeolocationobjectissupported,ifsogetposition  

if(navigator.geolocation)  

navigator.geolocation.getcurrentposition(displaylocation,displayerror);  

else  

document.getelementbyid("locationdata").innerhtml="sorry-yourbrowserdoesn'tsupportgeolocation!";  

用户点击按钮的时候就会调用函数。代码首先会检查导航器地理位置对象是否显示出来,如果显示出来则浏览器支持。如果地理位置对象被支持,那么代码会使用它来调用getcurrentposition方法。

getcurrerentposition方法取两个参数指示回调函数。,一个是在地理位置信息被获取时调用的函数,还有一个是错误返回时调用的函数。

如果地理位置对象不被支持,那么函数就只会把错误信息写入页面div要素中。

当一个网站首次试图检索用户位置数据时,用户浏览器会命令其确定它们是否同意共享数据。该函数只在用户同意的时候执行。

显示位置函数

下一步,我们需要部署的函数其实是getcurrentposition方法调用中的第一个参数。当浏览器接收到这个函数的时候,用户位置数据会传给这个函数。将下列代码添加到getuserlocation函数后面:

functiondisplaylocation(position){  

/buildtextstringincludingco-ordinatedatapassedinparameter  

vardisplaytext="userlatitudeis" position.coords.latitude "andlongitudeis" position.coords.longitude;  

//displaythestringfordemonstration  

document.getelementbyid("locationdata").innerhtml=displaytext;  

这个代码先创建了一个变量,在变量中创建了一个字符串,该字符串包含了位置参数的经纬度数据。然后这个函数会把这个信息和一些信息化文本写入页面。在你自己的网站中,你还可以把这些数据用作其他目的,而不仅仅是写入页面——此处仅作演示用。

错误函数

使用地理位置设备的时候可能会出现错误。如,用户或许不同意共享自己的地理位置数据,浏览器可能不能检索数据等。因此我们需要添加一个函数来处理应对错误,使用getcurrentposition方法的第二个函数。在displaylocation函数后添加下列函数:

function displayerror(error) {  

//get a reference to the html element forwriting result  

var locationelement =document.getelementbyid("locationdata");  

//find out which error we have, outputmessage accordingly  

switch(error.code) {  

case error.permission_denied:  

locationelement.innerhtml"permission was denied";  

break;  

case error.position_unavailable:  

locationelement.innerhtml"location data not available";  

break;  

case error.timeout:  

locationelement.innerhtml"location request timeout";  

break;  

case error.unknown_error:  

locationelement.innerhtml"an unspecified error occurred";  

break;  

default:  

locationelement.innerhtml"who knows what happened...";  

break;  

}} 

这个函数会地理位置请求发出后出现的错误信息进行检索。该函数首先会获取页面div要素的参考以便写入合适的错误信息。用交换语句对此信息进行调整使其适应错误的特殊属性。

考虑和选择

以上函数涵盖了用户位置数据检索的基本要点。你可以使用检索过的位置数据通过google maps api在地图上显示用户位置,主要是在自定义url中创建数据变量,然后将其加载到你页面的html图像要素中。

你还可以使用watchposition方法追踪用户位置甚至是他们移动的速度,尽管这些数据因为并非来自移动设备的gps而缺乏准确性,例如数据可能来自无线网络。

这些函数会为web开发员带来美好的未来。不过,它们的成功不仅需要浏览器提供支持,还得用户喜欢,硬件支持。

 

|返回栏目页|下一条资讯

分享到:
1

沈阳网站制作--网站前台效果

易势网站制作,以div css为主,js/jquery为辅,制作利于优化,页面美观的优质网站!

top

网络策划公司|新浪官方微博|

网站软件咨询

客户服务咨询

网站地图