如何使用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 相关文章推荐
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
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
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php微信公众号开发模式详解
2016/11/28 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
numpy.random模块用法总结
2019/05/27 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python中温度单位转换的实例方法
2020/12/27 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
高级护理实习生自荐信
2013/09/28 职场文书
医学生求职自荐信
2013/10/25 职场文书
项目考察欢迎辞
2014/01/17 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
薪资证明范本
2015/06/19 职场文书
2016年国培研修日志
2015/11/13 职场文书
《实心球》教学反思
2016/02/23 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python