本文摘自PHP中文网,作者黄舟,侵删。
一、简介 html5为window.navigator提供了geolocation属性,用于获取基于浏览器的当前用户地理位置。
window.navigator.geolocation提供了3个方法分别是:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | void getCurrentPosition(onSuccess,onError,options);
//获取用户当前位置
int watchCurrentPosition(onSuccess,onError,options);
//持续获取当前用户位置
void clearWatch(watchId);
//watchId 为watchCurrentPosition返回的值
//取消监控
options = {
enableHighAccuracy,//boolean 是否要求高精度的地理信息
timeout,//获取信息的超时限制
maximumAge//对地理信息进行缓存的时间
}
//options可以不写,为默认即可
|
二、position对象
当成功获取地理位置信息时候,onsuccess方法中会返回position对象,通过这个对象可以获取地理位置的相关信息,包括:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | position对象的属性:
latitude,//纬度
longitude,//经度
altitude,//海拔高度
accuracy,//获取纬度或者经度的精度
altitudeAccurancy,//海拔高度的精度
heading,//设备前景方向。正北方向的顺时针旋转角
speed,//设备的前进速度 m/s
timestamp,//获取地理位置信息时候的时间
|
三、基于google map的例子
直接看代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE HTML>
< html >
< head >
< meta charset = "UTF-8" >
< title >在页面上使用google地图示例</ title >
</ head >
< body onload = 'init()' >
< div id = "map" style = 'width:800px;height:800px;' ></ div >
< script type = "text/javascript" src = 'http://maps.google.com/maps/api/js?sensor=false' ></ script >
< script type = "text/javascript" >
function init(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
var coords = pos.coords;
var latlng =new google.maps.LatLng(coords.latitude,coords.longitude);
var options = {zoom:14,center:latlng,mapTypeId : google.maps.MapTypeId.ROADMAP};
var map1;
map1 =new google.maps.Map(document.getElementById('map'),options);
var marker =new google.maps.Marker({
position : latlng,
map : map1
});
var infowindow =new google.maps.InfoWindow({
content : '当前位置!'
});
infowindow.open(map1,marker);
});
}
}
</ script >
</ body >
</ html >
|
以上就是html5 navigator.geolocation基于浏览器获取地理位置代码案例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5 什么是prefetch/prerender?介绍HTML5 中prefetch/prerender
在HTML5在线预览pdf格式的代码
HTML5怎样做出图片转圈的动画效果
移动端中touch事件的详解
如何使用css设计出一个表单页面(附示例)
HTML5新增了哪些标签和属性?新增了标签和属性(总结)
h5怎样实现获取用户地理定位
h5拖放api进行拖放排序
HTML5中怎么用js?
如何使用HTML5中postmessage实现ajax中的post跨域问题的详细介绍
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html5 navigator.geolocation基于浏览器获取地理位置代码案例