如何使用HTML5地理位置定位功能


Posted in Javascript onApril 27, 2015

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置信息。

定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。

function getLocation(){ 
  if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(showPosition,showError); 
  }else{ 
    alert("浏览器不支持地理定位。"); 
  } 
}

上面的代码可以知道,如果用户设备支持地理定位,则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition() 方法的第二个参数showError用于处理错误,它规定当获取用户位置失败时运行的函数。
我们先来看函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式:
 

function showError(error){ 
  switch(error.code) { 
    case error.PERMISSION_DENIED: 
      alert("定位失败,用户拒绝请求地理定位"); 
      break; 
    case error.POSITION_UNAVAILABLE: 
      alert("定位失败,位置信息是不可用"); 
      break; 
    case error.TIMEOUT: 
      alert("定位失败,请求获取用户位置超时"); 
      break; 
    case error.UNKNOWN_ERROR: 
      alert("定位失败,定位系统失效"); 
      break; 
  } 
}

我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。

function showPosition(position){ 
  var lat = position.coords.latitude; //纬度 
  var lag = position.coords.longitude; //经度 
  alert('纬度:'+lat+',经度:'+lag); 
}

利用百度地图和谷歌地图接口获取用户地址
上面我们了解了HTML5的Geolocation可以获取用户的经纬度,那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口,我们只需要将HTML5获取到的经纬度信息传给地图接口,则会返回用户所在的地理位置,包括省市区信息,甚至有街道、门牌号等详细的地理位置信息。
我们首先在页面定义要展示地理位置的div,分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互,我们将经纬度信息通过Ajax方式发送给百度地图接口,接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据,我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库,需要先加载jQuery库文件。

function showPosition(position){ 
  var latlon = position.coords.latitude+','+position.coords.longitude; 
   
  //baidu 
  var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0"; 
  $.ajax({ 
    type: "GET", 
    dataType: "jsonp", 
    url: url, 
    beforeSend: function(){ 
      $("#baidu_geo").html('正在定位...'); 
    }, 
    success: function (json) { 
      if(json.status==0){ 
        $("#baidu_geo").html(json.result.formatted_address); 
      } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $("#baidu_geo").html(latlon+"地址位置获取失败"); 
    } 
  }); 
});

再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口,接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据,这些JSON数据比百度地图接口返回的要更详细,我们可以根据需求将需要的信息展示给div#google_geo。

function showPosition(position){ 
  var latlon = position.coords.latitude+','+position.coords.longitude; 
 
  //google 
  var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; 
  $.ajax({ 
    type: "GET", 
    url: url, 
    beforeSend: function(){ 
      $("#google_geo").html('正在定位...'); 
    }, 
    success: function (json) { 
      if(json.status=='OK'){ 
        var results = json.results; 
        $.each(results,function(index,array){ 
          if(index==0){ 
          $("#google_geo").html(array['formatted_address']); 
          } 
        }); 
      } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $("#google_geo").html(latlon+"地址位置获取失败"); 
    } 
  }); 
}

以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中,我们可以根据实际情况进行调用。当然这只是一个简单的应用,我们可以根据这个简单的示例开发出很多复杂的应用,建议用手机浏览器访问DEMO演示。

Javascript 相关文章推荐
Javascript读取cookie函数代码
Oct 16 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
js原生map实现的方法总结
Jan 19 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 #Javascript
Javascript非构造函数的继承
Apr 27 #Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 #Javascript
jquery简单的弹出层浮动层代码
Apr 27 #Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 #Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 #Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 #Javascript
You might like
第二节--PHP5 的对象模型
2006/11/16 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
php实现httpclient类示例
2014/04/08 PHP
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python中的with...as用法介绍
2015/05/28 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
重构Python代码的六个实例
2020/11/25 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
自主招生自荐信
2013/12/08 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
粗加工管理制度
2014/02/04 职场文书
元宵晚会主持词
2014/03/25 职场文书
物流专业求职信
2014/06/30 职场文书
治安消防安全责任书
2014/07/23 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
销售员岗位职责范本
2015/04/11 职场文书
优质护理服务心得体会
2016/01/22 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Vue全局事件总线你了解吗
2022/02/24 Vue.js