首页 > 代码库 > 地理位置信息API

地理位置信息API

  1. 首先研究window.navigater对象

      window.navigator用来查询一些关于运行当前脚本的应用程序的相关信息。For example,

1 alert("You‘re using " + navigator.appVersion);

      该段代码将查询返回当前浏览器的版本号。此外,navigator对象还有navigator.appName(返回浏览器的正式名称), navigator.cookieEnabled(返回布尔值表明浏览器是否启用cookies)等各种属性以及navigator.vibrate()(如果设备支持震动,则触发设备震动)等方法。具体请参见末尾参考资料中的第一项链接。在本文的应用程序中着重了解window.navigater的子对象geolocation。

      IE9引入了内置的位置提供程序,后来Html5也提供了地理位置信息的API,通过浏览器来获取用户当前位置。它们主要使用Wi-Fi位置数据和IP协议的地址信息来定位,详细原理参见《计算机网络》中的介绍(简单地说就是IP地址信息蕴含着对于不同区域的相应分配)。而上述的地理位置API都通过在网页中使用geolocation对象向JavaScript提供经度和纬度信息。其中geolocation对象有一个很重要的方法便是getCurrentPosition(),它的语法形式如下:

navigator.geolocation.getCurrentPosition(success, error, options)

      success参数是一个回调函数,以位置对象作为自身的输入参数;后面的参数error和options都是可选参数,error回调函数用于传入位置错误的信息并反馈,options是一些可选的位置信息对象。详细的文档介绍参见参考资料的第二项链接。下面以一个例子来说明:

1 window.navigator.geolocation.getCurrentPosition(map);2 3 function map(position) {4       var latitude = position.coords.latitude;5       var longitude = position.coords.longitude;6 };

     2.  检测浏览器是否支持geolocation

       在使用地理位置API,应先确保浏览器支持geolocation对象,即windows.navigator.geolocation不为null。

1 if (window.navigator.geolocation) {2     window.navigator.geolocation.getCurrentPosition(Success);3 } else {4       alert("您的浏览器不支持html5获取地理位置信息");5 }

       对于W3C API标准中地理位置API的支持,不同的浏览器可能会有不同的问题,这是我在StackOverFlow中寻求的问答,如果您的浏览器有问题,请尝试在这些问答中看看是否有类似的问题解答。

       http://stackoverflow.com/questions/9215662/navigator-geolocation-getcurrentposition-callbacks-wont-work-on-firefox-10

       http://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt

     3. 获取位置信息,并调用百度地图API显示

 1 function success(position) { 2       // 获取位置对象中关于经度、纬度的信息 3       var longitude = position.coords.longitude; 4       var latitude = position.coords.latitude; 5  6       // 调用百度地图API, 内容显示在html中id为“show_map”的区块 7       var show_map = new BMap("show_map"); 8       var other_point = new BMap.Point(longitude, latitude); 9 10       // 转换接口11       BMap.Convertor.translate(other_point, 2, function(point) {12               var marker = new BMap.Marker(point);13               show_map.addOverlay(marker);14               map.centerAndZoom(point, 15);15       });16 };

     由于谷歌地图、高德地图和百度地图对于经纬度标准的处理有所不同,所以必须进行经纬度坐标的转换,这里调用了百度自身已写好的关于坐标转换的JavaScript,即convertor.js。因此在文件中也必须记得引用

<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

     关于如何找到百度地图的各种接口方法以及convertor.js等文件,具体参见链接第四条http://developer.baidu.com/map/

     4. 相关补充

     可选参数error回调函数的一个example:

1 function error(err) {2       alert("Error(" + err.code +"): " + err.message);3 };

     具体有哪些错误可参见PositionError的文档介绍https://developer.mozilla.org/en-US/docs/Web/API/PositionError

     可选参数options可设置enableHighAccuracy, timeout, maximumAge等属性。

     具体含义及设置可参照PositionOptions的文档介绍https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions

 

参考资料:

[1]https://developer.mozilla.org/zh-CN/docs/Web/API/Window.navigator

[2]https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.getCurrentPosition

[3]http://msdn.microsoft.com/zh-cn/library/gg589513(v=vs.85).aspx

[4]http://developer.baidu.com/map/

地理位置信息API