1. /**
  2. * 以下为html5代码,获取地理位置
  3. */
  4. function getLocation() {
  5. //检查浏览器是否支持地理位置获取
  6. if (navigator.geolocation) {
  7. //若支持地理位置获取,成功调用showPosition(),失败调用showError
  8. // alert("正在努力获取位置...");
  9. var config = { enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 };
  10. navigator.geolocation.getCurrentPosition(showPosition, showError, config);
  11. } else {
  12. //alert("Geolocation is not supported by this browser.");
  13. alert("定位失败,用户已禁用位置获取权限");
  14. }
  15. }
  16.  
  17. /**
  18. * 获取地址位置成功
  19. */
  20. function showPosition(position) {
  21. //获得经度纬度
  22. var x = position.coords.latitude;
  23. var y = position.coords.longitude;
  24. //配置Baidu Geocoding API
  25. var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b" +
  26. "&callback=renderReverse" +
  27. "&location=" + x + "," + y +
  28. "&output=json" +
  29. "&pois=0";
  30. $.ajax({
  31. type: "GET",
  32. dataType: "jsonp",
  33. url: url,
  34. success: function (json) {
  35. if (json == null || typeof (json) == "undefined") {
  36. return;
  37. }
  38. if (json.status != "0") {
  39. return;
  40. }
  41. setAddress(json.result.addressComponent);
  42. },
  43. error: function (XMLHttpRequest, textStatus, errorThrown) {
  44. alert("[x:" + x + ",y:" + y + "]地址位置获取失败,请手动选择地址");
  45. }
  46. });
  47. }
  48.  
  49. /**
  50. * 获取地址位置失败[暂不处理]
  51. */
  52. function showError(error) {
  53. switch (error.code) {
  54. case error.PERMISSION_DENIED:
  55. alert("定位失败,用户拒绝请求地理定位");
  56. //x.innerHTML = "User denied the request for Geolocation.[用户拒绝请求地理定位]"
  57. break;
  58. case error.POSITION_UNAVAILABLE:
  59. alert("定位失败,位置信息是不可用");
  60. //x.innerHTML = "Location information is unavailable.[位置信息是不可用]"
  61. break;
  62. case error.TIMEOUT:
  63. alert("定位失败,请求获取用户位置超时");
  64. //x.innerHTML = "The request to get user location timed out.[请求获取用户位置超时]"
  65. break;
  66. case error.UNKNOWN_ERROR:
  67. alert("定位失败,定位系统失效");
  68. //x.innerHTML = "An unknown error occurred.[未知错误]"
  69. break;
  70. }
  71. }
  72.  
  73. /**
  74. * 设置地址
  75. */
  76.  
  77. function setAddress(json) {
  78. var position = document.getElementById("txtPosition");
  79. //省
  80. var province = json.province;
  81. //市
  82. var city = json.city;
  83. //区
  84. var district = json.district;
  85. province = province.replace('市', '');
  86. position.value = province + "," + city + "," + district;
  87. position.style.color = 'black';
  88. }

获取地理位置的html5代码的更多相关文章

  1. 微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery)

    复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示. 图7.1  7.1节文件结构 在location.js中,封装“getLocation”接口,如下: 01 wxJSSD ...

  2. html5代码,获取地理位置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  3. Html5 Geolocation获取地理位置信息

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  4. AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

    HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...

  5. html5实现获取地理位置信息并定位

    这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下: h5提供了地理位置功能(Geolocation API),能 ...

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

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

  7. Html5 Geolocation获取地理位置信息(转)

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  8. HTML5实现获取地理位置信息并定位功能

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

  9. HTML5 获取地理位置信息

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

随机推荐

  1. svn跳过某个目录

    svn up --set-depth exclude dir2 http://stackoverflow.com/questions/1439176/svn-can-you-remove-direct ...

  2. struts2实现文件上传

    Struts2中实现简单的文件上传功能: 第一步:将如下文件引入到WEB_INF/lib目录下面,对应的jar文件可自行下载 第二步:在包test.struts2下建立类UploadFile pack ...

  3. google proto buffer安装和简单示例

    1.安装 下载google proto buff. 解压下载的包,并且阅读README.txt,根据里面的指引进行安装. $ ./configure $ make $ make check $ mak ...

  4. homework-01 "最大子数组之和"的问题求解过程

    写在前面:我的算法能力很弱,并且也是第一次写博文,总之希望自己能在这次的课程中学到很多贴近实践的东西吧. 1.这次的程序是python写的,这也算是我第一次正正经经地拿python来写东西,结果上来说 ...

  5. JavaFX 2 Dialogs

    http://edu.makery.ch/blog/2012/10/30/javafx-2-dialogs/ ———————————————————————————————————————————— ...

  6. [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView

    A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组   code so ...

  7. PC 端微信扫码注册和登录

    一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网 ...

  8. 基于EF的数据外键关联查询

    现在很多ORM不自带外键关联的实体查询,比如我查询用户,用时将关联的角色信息查询出来,那么就要进行2次查询,很麻烦.而我现在要做的就是基于EF的外键关联查询.很方便的. 首先,创建基础查询的BaseS ...

  9. Spring 的两个配置容器的讲解

    容器 是Spring框架的核心,是组件存活的地方.Spring容器使用DI管理所有组成应用系统的组件,协作组件之间建立联.而且, 这些对象简洁易懂,降低耦合性,支持重用,容易被测试. Spring提供 ...

  10. 删除链表中全部值为k的节点

    1. 问题描写叙述 给定一个单链表,删除当中值为k的全部节点.比如:1→2→6→3→4→5→61 \to 2 \to 6 \to 3 \to 4 \to 5 \to 6,删除当中值为6的节点,返回:1 ...