如何使用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()中,我们可以根据实际情况进行调用。当然这只是一个简单的应用,我们可以根据这个简单的示例开发出很多复杂的应用.

HTML5获取地理位置定位信息的更多相关文章

  1. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  2. 【Demo】HTML5获取地理位置

    HTML5获取地理位置简单实例 实例1--获取地理位置的经纬度: <!DOCTYPE html> <html> <head>  <meta charset=& ...

  3. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  4. html5获取自己定位的方法

    html5获取自己定位的方法直接用高德地图api 不要用百度地图api 不准确 <pre><!doctype html><html><head> < ...

  5. Android 获取手机信息,设置权限,申请权限,查询联系人,获取手机定位信息

    Android 获取手机信息,设置权限,申请权限,查询联系人,获取手机定位信息 本文目录: 获取手机信息 设置权限 申请权限 查询联系人 获取手机定位信息 调用高德地图,设置显示2个坐标点的位置,以及 ...

  6. HTML5 获取地理位置信息

    HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置.该Geolocation API可以应用于移动设备中的地理位置. Geolocat ...

  7. html5获取地理位置和定位

    1.H5地理位置定位功能 首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意 function getLocation(){ if (navigator.geol ...

  8. html5 Geolocation(地理位置定位)学习

    1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...

  9. html5的地理位置定位

    html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理GPS, WIFI, IP, 手机信号基站 核心对象Geolocation是wi ...

随机推荐

  1. expo-cli & React Native

    expo-cli https://reactnative.dev/docs/environment-setup You will only need a recent version of Node. ...

  2. 小程序 in action

    小程序 in action https://github.com/xgqfrms/xcx-taro taro https://taro-docs.jd.com/taro/docs/README.htm ...

  3. BGV再度爆发,流通市值破500万美金!

    BGV似乎以超乎寻常的姿态,开启了爆发的模式.这两天,BGV一路上涨,日内最高涨至548.78美金,24小时成交额达到了98.07万美金,24小时成交量达到1844.93枚BGV,流通市值更是突破了5 ...

  4. NGK.IO的智能合约是炒作还是未来商业的主流?

    随着NGK主网的上线,NGK市场也备受关注.目前,NGK代币价格已经由初始价格0.0215美元涨到现在的0.86美元,代币价格上涨40倍!数字货币市场也已经将重点目光放到了NGK代币上,相信在不久的将 ...

  5. 2021-2-25:对于 Java MMAP,如何查看文件映射脏页,如何统计MMAP的内存大小?

    我们写一个测试程序: public static void main(String[] args) throws Exception { RandomAccessFile randomAccessFi ...

  6. <span>居中

    在父元素中加style="text-align:center"; 比如下面这样 <head> </head> <body>     <di ...

  7. Python爬虫系统化学习(3)

    一般来说当我们爬取网页的整个源代码后,是需要对网页进行解析的. 正常的解析方法有三种 ①:正则匹配解析 ②:BeatuifulSoup解析 ③:lxml解析 正则匹配解析: 在之前的学习中,我们学习过 ...

  8. Jmeter的脚本参数化

    一.变量 Jmeter中的变量用法:${变量名称} 变量定义:两种 1.用户定义变量 User Defined Variables 2.用户参数  User Parameters 1.1用户定义变量 ...

  9. 如何进BAT,有了这个篇面试秘籍,成功率高达80%!!(附资料)

    多年前自己刚来北京找工作的时候,面了一个星期 面了七八家公司才拿到一个offer.而上次跳槽面了不到10家公司基本全过而且都给到了期望的薪资,本来自己在面试前没想到能够这么顺利,回想起来还是自己准备的 ...

  10. 关于KMP算法中,获取next数组算法的理解

    参考:KMP入门级别算法详解--终于解决了(next数组详解) https://blog.csdn.net/lee18254290736/article/details/77278769 在这里讨论的 ...