本文摘自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中的新事件
HTML5 是什么意思
HTML5 source标签详解
HTML5 video 上传预览图片视频,设置、预览视频某秒的海报帧
HTML5中返回当前音频/视频的url的属性currentsrc
HTML5实践-灰色图片画廊实现的方法
HTML5、css实现文字阴影效果实例分享
HTML5碎片式图片切换制作方法详解
HTML5 canvas常用属性方法(介绍)
HTML5 应用程序缓存
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html5 navigator.geolocation基于浏览器获取地理位置代码案例