如何使用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 setTimeout和setInterval 的区别
Dec 08 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
js格式化时间的方法
2015/12/18 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
js实现下一页页码效果
2017/03/07 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python读写csv文件实例代码
2019/07/05 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
中医药大学毕业生自荐信
2013/11/08 职场文书
出国留学经济担保书
2014/04/01 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
学校欢迎标语
2014/06/18 职场文书
公司周年庆活动方案
2014/08/25 职场文书
普通党员对照检查材料
2014/08/28 职场文书
音乐剧猫观后感
2015/06/04 职场文书
班级管理经验交流材料
2015/11/02 职场文书