如何使用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. js 实现各种算法 APP

    js 实现各种算法 APP 常见算法: 排序,搜索/查找,枚举,遍历,最短路径,二叉树 open source web app desktop app react native app flutter ...

  2. js currying function All In One

    js currying function All In One js 实现 (5).add(3).minus(2) 功能 例: 5 + 3 - 2,结果为 6 https://stackoverflo ...

  3. c++ readIntger writeIntger

    类似CE的read/writeIntger函数(外部) #include <iostream> #include <Windows.h> #include <TlHelp ...

  4. 调整是为了更好的上涨,牛市下的SPC空投来了!

    2021年刚过没几天,比特币就开启了牛市的旅程,BTC涨到4万美元,ETH涨到1300多美元,BGV也涨到了621.05美元,牛市已然来袭. 虽然从近两日,比特币带领着主流币进行了一波调整,但是只涨不 ...

  5. Elasticsearch---DSL搜索实践

    Domain Specific Language 特定领域语言,基于JSON格式的数据查询,查询更灵活,有利于复杂查询 一.普通url路径参数搜索 数据准备 1.建立名字为 shop 的索引 2.手动 ...

  6. 使用docker-compose配置mysql数据库并且初始化用户

    使用docker-compose配置mysql数据库并且初始化用户 docker-compose  测试创建一个docker-compose.yml测试 以下配置了外部数据卷.外部配置文件.外部初始化 ...

  7. 话说 synchronized

    一.前言 ​ 说起java的锁呀,我们先想到的肯定是synchronized[ˈsɪŋ krə naɪ zd]了 ,这个单词很拗口,会读这个单词在以后的面试中很加分(我面试过一些人 不会读 ,他们说的 ...

  8. 剑指 Offer 60. n个骰子的点数 + 动态规划 + 空间优化

    剑指 Offer 60. n个骰子的点数 Offer_60 题目详情 题解分析 package com.walegarrett.offer; /** * @Author WaleGarrett * @ ...

  9. C#的foreach遍历循环和隐式类型变量

    C#的foreach遍历循环和隐式类型变量 foreach遍历循环 foreach (<baseType> <name> in <array>>) { //c ...

  10. Boltdb学习笔记之〇--概述

    更多精彩内容,请关注微信公众号:后端技术小屋 看了boltdb也有一阵子了,看完之后总想写点什么,因为感觉到这可能是个不小的坑,所以迟迟没有动笔(没错我的拖延症又犯了..).最近有一种流行的说法:如果 ...