思享工具箱

突袭HTML5之Javascript API扩展2 地理信息服务

摘要：
在HTML5中，添加了一个新的地理位置API来确定和共享地理位置。如果用户未授予权限，则不会向Web应用程序提供位置信息。调用相关API不会触发成功的回调。如果地理位置API不可用，则窗口。navigator地理位置将为空，如下所示：functionshow_sislocationenabled（）｛varstr=“否，不支持地理位置。”；如果｛str=“是，支持地理位置问题。”；｝警报；｝地理位置API基于全局对象导航器的一个新属性：navigatorGeolocation，它提供了有关访问者浏览器和系统的一些有用信息。使用navigator定位当前位置geolocation的getCurrentPosition（）方法获取用户的当前位置。此方法只获取一次位置信息。

      现在比较火的一类服务叫做基于位置的服务(location-based service， LBS)，这一类服务就是企业利用某点(例如用户所在的位置)坐标附近的区域提供服务的信息，比如常见的地图相关服务。在HTML5中，加入了新的地理位置API用来确定和分享地理位置。

隐私申明
      在与远程Web服务器共享物理位置时，隐私是一个需要关注的问题。因此，地理位置API会要求用户先提供权限，然后Web应用程序才能访问位置信息。首次访问请求地理位置数据的网页时，浏览器将显示一个通知栏，提示提供对用户位置的访问权限。按照浏览器的提示，选择相关的授权即可。
      如果用户未授予权限，则不会向 Web 应用程序提供位置信息。调用相关API不会触发成功回调。

检查浏览器的支持情况
      地理位置API在主流的浏览器的最新版中都支持了，但是为了兼容老的浏览器，还是要检查一下。如果地理位置 API 不可用，则 window.navigator.geolocation 将为 null，如下所示：

function show_islocationenabled()
{
  var str = "No, geolocation is not supported.";  
  if (window.navigator.geolocation) {
    str = "Yes, geolocation is supported.";
  }
  alert( str );
}

      Geolocation API基于navigator这一全局对象的一个新属性：navigator.geolocation，该对象提供了一些关于访问者的浏览器和系统的有用信息。Geolocation的信息可以通过许多手段获得：比如基站、web的数据库或是GPS等。使用不同的方式获取到的Geolocation信息精度也是不一样的，通常情况下，通过GPS获得的最为准确(移动平台上使用GPS最多，PC平台上基本都是靠网络数据)。偶然情况下，在一些位置上，你有可能不能获得明确的地理位置读数或是一点数据都接收不到。

定位当前位置
　　使用navigator.geolocation的getCurrentPosition()方法获取用户的当前位置，这个方法只获取一次位置的信息。当该方法被脚本调用时，方法以异步的方式来尝试获取宿主设备的当前位置。

   方法签名：getCurrentPosition(geolocationSuccessCallback,[geolocationErrorCallback,geolocationOptions]);
　　1. geolocationSuccessCallback：获取当前位置成功后的回调(必需的)
　　2. geolocationErrorCallback. 有错误发生时使用的回调(可选的)
　　3. geolocationOptions. 地理位置选项(可选的)
     

  处理位置信息     

      getCurrentPositon()方法获得当前位置成功后会将位置信息保存到一个Position对象中，然后把这个对象作为参数来执行geolocationSuccessCallback这一回调。在这个回调函数中，你可以任意处置这个对象中包含的信息。
      Position对象有两个属性：timestamp和coords。timestamp属性表示地理位置数据的创建时间，coords属性表示地理位置信息，又包含七个属性：

   1. coords.latitude：估计纬度
   2. coords.longitude：估计经度
   3. coords.altitude：估计高度
   4. coords.accuracy：所提供的以米为单位的经度和纬度估计的精确度
   5. coords.altitudeAccuracy：所提供的以米为单位的高度估计的精确度
   6. coords.heading： 宿主设备当前移动的角度方向，相对于正北方向顺时针计算
   7. coords.speed：以米每秒为单位的设备的当前对地速度

　　一般的，这些属性中有三项是保证有的：coords.latitude、coords.longitude和coords.accuracy，其余的返回null；这取决于设备的能力和其所采用的后端定位服务器。而且，heading和speed属性可以基于用户之前的位置计算出来。

  处理错误

      执行getCurrentPositon()方法时如果有错误发生的话，则该方法传递一个PositionError对象给geolocationErrorCallback回调。

  设置地理位置选项

      你可以设置geolocationOptions的三个属性：

enableHighAccuracy:如果设备支持高精度的话，这个选项表示是否启用高精度。
timeout:查询超时时间
maximumAge: 缓存的位置最大的时间数，在这一时间段内缓存可被使用。

      看下面完整的例子：

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition,showError);
  }
  else{
    x.innerHTML="Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  var latlon=position.coords.latitude+","+position.coords.longitude;

  var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +
    latlon + "&zoom=9&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='http://t.zoukankan.com/"+img_url+"' />";
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
  }
}
</script>
</body>
</html>

      这个例子获取到当前设备所在的地理位置并显示到Google地图中。当然你可以使用百度地图API中的静态图版来改造这个例子。百度地图API参看后面的实用参考中的链接。


开启/取消持续定位
      使用navigator.geolocation的watchPosition()方法可以定期轮询用户的位置，查看用户的位置是否发生改变。这个方法有三个参数：这三个参数和getCurrentPosition()方法一样，一个成功后的回调，一个失败后的回调，和一个获取位置信息的选项；这个方法有一个返回值watchID，用于取消持续定位。

      使用navigator.geolocation的clearWatch()方法可以终止正在进行的watchPosition()，该方法只带一个参数watchID。

      看下面的例子：

<!DOCTYPE html>    
<html>
<head>
<title>Geolocation API Example: Listening for Location Updates</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">

function setText(val, e) {
    document.getElementById(e).value = val;
}

var nav = null; 
var watchID;

function listenForPositionUpdates() {
  if (nav == null) {
      nav = window.navigator;
  }
  if (nav != null) {
      var geoloc = nav.geolocation;
      if (geoloc != null) {
          watchID = geoloc.watchPosition(successCallback);
      }
      else {
          alert("geolocation not supported");
      }
  }
  else {
      alert("Navigator not found");
  }
}

function clearWatch(watchID) {
    window.navigator.geolocation.clearWatch(watchID);
}

function successCallback(position)
{
   setText(position.coords.latitude, "latitude");
   setText(position.coords.longitude, "longitude");
}
</script>
</head>
<body>
<label for="latitude">Latitude: </label><input id="latitude" /> <br />
<label for="longitude">Longitude: </label><input id="longitude" /> <br />
<input type="button" value="Watch Latitude and Longitude" onclick="listenForPositionUpdates()" /> 
<input type="button" value="Clear watch" onclick="clearWatch()" />

</body>
</html>


实用参考：
官方文档：http://www.w3schools.com/html5/html5_geolocation.asp
微软帮助：http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
百度地图API：http://dev.baidu.com/wiki/static/index.htm

标签：#api#html5#position#地理信息#latitude | 浏览：119 | 发布日期：

免责声明：文章转载自《突袭HTML5之Javascript API扩展2 地理信息服务》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇MyBatis：resultMap详解Android4.0中蓝牙适配器state machine（状态机）的分析下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

查询指定距离内的快递柜或者店铺

背景：我们在淘宝购物时，选择了某个地址，有时会提示可以选择放到附近的快递柜子，这种是如何实现的呢？用redis geo api可以简单的实现该功能 思路：1. 我们先将所有的快递柜子存到redis中，这些快递柜信息要包含经纬度             /** * * @param longitude 经度 * @param...

聚合数据全国天气预报api接口

查询天气预报在APP中常用的一个常用功能，聚合数据全国天气预报api接口可以根据根据城市名/id查询天气、根据IP查询天气、据GPS坐标查询天气、查询城市天气三小时预报，并且支持全国不同城市天气预报查询。全国天气预报API：https://www.juhe.cn/docs/api/id/391.首先登录聚合数据，在API列表中找到全国天气预报api接口：...

js截取指定长度字符

Code/// <summary> /// 截取指定长度的（中英文）字符 /// </summary>function curStr(str,length) {     var position=0;     var result=[];     for (var i = 0; i < str.length; i++)   ...

android应用程序中获取view的位置

android应用程序中获取view的位置_雨枫技术教程网  我们重点在获取view的y坐标,你懂的... 依次介绍以下四个方法:   1.getLocationInWindow   int[] position = new int[2];  textview.getLocationInWindow(position);  System.out.pr...

支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示

随着深入使用ASP.NET Web Api，我们可能会在项目中考虑将前端的业务分得更细。比如前端项目使用Angularjs的框架来做UI，而数据则由另一个Web Api 的网站项目来支撑。注意，这里是两个Web网站项目了，前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理，而Web Api则负责提供数据。 这样问题就来了，如果前端通过ajax访问Web...

HTML5 video 详解 属性 事件 方法

时至今天 2016年12月9日，chrome 的 版本 55.0.2883.75 (64-bit)。浏览器自带的播放器已经足够强大了，看下图，现在完全没必要去自己创建个播放器了。（可以想象html5视频播放器就是一套theme(皮肤)） 1.0.1. 那么 HTML5 (视频)- 如何工作 ？ HTML5 中显示视频，您所有需要的是： <vide...

最新文章

随机推荐

思享工具箱导航