首页 > 代码库 > 地理位置信息API
地理位置信息API
- 首先研究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