HTML5开发：地理位置定位指南

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

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比文登网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式文登网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖文登地区。费用合理售后完善，十多年实体公司更值得信赖。

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

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

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

HTML5 Web 页面

使用下列代码创建HTML5页面的框架：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9.

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

HTML演示要素

向HTML主体部分添加下列markup：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. Location data here  
    4.
 

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

获取位置函数

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

 
 
 
    
  
  
  
  1. functiongetUserLocation(){  
    2. 
  
  
  
  2. //checkifthegeolocationobjectissupported,ifsogetposition  
    3. 
  
  
  
  3. if(navigator.geolocation)  
    4. 
  
  
  
  4. navigator.geolocation.getCurrentPosition(displayLocation,displayError);  
    5. 
  
  
  
  5. else  
    6. 
  
  
  
  6. document.getElementById("locationData").innerHTML="Sorry-yourbrowserdoesn'tsupportgeolocation!";  
    7. 
  
  
  
  7. } 
    8.

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

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

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

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

显示位置函数

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

 
 
 
    
  
  
  
  1. functiondisplayLocation(position){  
    2. 
  
  
  
  2. /buildtextstringincludingco-ordinatedatapassedinparameter  
    3. 
  
  
  
  3. vardisplayText="Userlatitudeis"+position.coords.latitude+"andlongitudeis"+position.coords.longitude;  
    4. 
  
  
  
  4. //displaythestringfordemonstration  
    5. 
  
  
  
  5. document.getElementById("locationData").innerHTML=displayText;  
    6. 
  
  
  
  6. } 
    7.

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

错误函数

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

 
 
 
    
  
  
  
  1. function displayError(error) {  
    2. 
  
  
  
  2. //get a reference to the HTML element forwriting result  
    3. 
  
  
  
  3. var locationElement =document.getElementById("locationData");  
    4. 
  
  
  
  4. //find out which error we have, outputmessage accordingly  
    5. 
  
  
  
  5. switch(error.code) {  
    6. 
  
  
  
  6. case error.PERMISSION_DENIED:  
    7. 
  
  
  
  7. locationElement.innerHTML= "Permission was denied";  
    8. 
  
  
  
  8. break;  
    9. 
  
  
  
  9. case error.POSITION_UNAVAILABLE:  
    10. 
  
  
  
  10. locationElement.innerHTML= "Location data not available";  
    11. 
  
  
  
  11. break;  
    12. 
  
  
  
  12. case error.TIMEOUT:  
    13. 
  
  
  
  13. locationElement.innerHTML= "Location request timeout";  
    14. 
  
  
  
  14. break;  
    15. 
  
  
  
  15. case error.UNKNOWN_ERROR:  
    16. 
  
  
  
  16. locationElement.innerHTML= "An unspecified error occurred";  
    17. 
  
  
  
  17. break;  
    18. 
  
  
  
  18. default:  
    19. 
  
  
  
  19. locationElement.innerHTML= "Who knows what happened...";  
    20. 
  
  
  
  20. break;  
    21. 
  
  
  
  21. }} 
    22.

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

考虑和选择

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

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

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

原文：http://www.e800.com.cn/articles/2012/0214/502849.shtml

网页名称：HTML5开发：地理位置定位指南
新闻来源：http://www.shufengxianlan.com/qtweb/news25/180425.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

解决方案知识

行业网站建设

小程序　　 　网站收录　　 　简阳电信服务器托管　　 　成都网站建设　　 　温江网站制作　　 　四川电信机房托管　　 　简阳电信机房　　 　成都店面装修公司　　 　成都app开发　　 　成都小程序商城　　 　帝美豪门窗　　 　网站排名　　 　APP定制开发　　 　重庆主机托管　　 　郫都区消防器材　　 　成都封阳台　　 　微信小程序开发　　 　成都谷歌SEO　　 　网站设计　　 　南充服务器托管