如何使用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简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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
PHP实现的比较完善的购物车类
2014/12/02 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
原生js实现公告滚动效果
2021/01/10 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
webpack5 联邦模块介绍详解
2020/07/08 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
python中的字典详细介绍
2014/09/18 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python实现log日志的示例代码
2018/04/28 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
盲山观后感
2015/06/11 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
基于redis+lua进行限流的方法
2022/07/23 Redis