易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

html5怎么实现调用gps获取地理位置具体代码

来源:网站建设行业资讯网
添加时间:2022-02-13
HTML5GeolocationAPI(地理位置应用程序接口)

目前PC浏览器支持情况:

Firefox3.5+
Chrome5.0+
Safari5.0+
Opera10.60+
InternetExplorer9.0+

手机支持情况:

Android2.0+
iPhone3.0+
OperaMobile10.1+
Symbian(S603rd&5thgeneration)
BlackberryOS6
Maemo

检测浏览器是否支持:

if(navigator.geolocation){
//console.log("浏览器支持!");
}
else{
//console.log("浏览器不支持!");

}


navigator.geolocation用于获取基于浏览器的当前用户地理位置,提供了3个方法:

voidgetCurrentPosition(onSuccess,onError,options);//获取用户当前位置
intwatchCurrentPosition(onSuccess,onError,options);//持续获取当前用户位置
voidclearWatch(watchId);//watchId为watchCurrentPosition返回的值//取消监控

复制代码

onSuccess方法成功时调用的(必选),onError方法失败是调用的(可选),options其他参数(可选)

options:
options={
enableHighAccuracy,   //boolean是否要求高精度的地理信息
timeout,         //表示等待响应的最大时间,默认是0毫秒,表示无穷时间
maximumAge        /应用程序的缓存时间
}              
onsuccess方法中会返回position对象,通过这个对象可以获取地理位置的相关信息

复制代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>基于浏览器的HTML5查找地理位置</title>
<!--百度API-->
<scriptsrc="http://api.map.baidu.com/api?v=1.2"type="text/javascript"></script>
<script>
functiongetLocation(){
varoptions={
enableHighAccuracy:true,
maximumAge:1000
}
if(navigator.geolocation){
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

}else{
//浏览器不支持geolocation
}
}

//成功时
functiononSuccess(position){
//返回用户位置
//经度
varlongitude=position.coords.longitude;
//纬度
varlatitude=position.coords.latitude;

//使用百度地图API
//创建地图实例
varmap=newBMap.Map("container");

//创建一个坐标
varpoint=newBMap.Point(longitude,latitude);
//地图初始化,设置中心点坐标和地图级别
map.centerAndZoom(point,15);
}

//失败时
functiononError(error){
switch(error.code){
case1:
alert("位置服务被拒绝");
break;

case2:
alert("暂时获取不到位置信息");
break;

case3:
alert("获取信息超时");
break;

case4:
alert("未知错误");
break;
}
}
window.onload=getLocation;
</script>
</head>
<body>
<div></div>
</body>
</html>
复制代码

获取当前位置加上偏移量会准一点

经度+经度校正值:0.008774687519;
纬度+纬度校正值:0.00374531687912;

网站建设计最新案例赏析:


欧马腾会展科技网站制作首页设计效果图
欧马腾会展科技
东莞吉川机械科技网站制作首页设计效果图
东莞吉川机械科技
阳光雨露信息技术服务网站制作首页设计效果图
阳光雨露信息技术服务
浙江爱就推门玩具网站制作首页设计效果图
浙江爱就推门玩具
河南赛唯家具网站制作首页设计效果图
河南赛唯家具
山东刚泽金属制品网站制作首页设计效果图
山东刚泽金属制品
青岛沃柏斯智能实验网站制作首页设计效果图
青岛沃柏斯智能实验
东莞纳普电子科技网站制作首页设计效果图
东莞纳普电子科技
佛山市共宏纺织机械网站制作首页设计效果图
佛山市共宏纺织机械
广东丰大机械科技网站制作首页设计效果图
广东丰大机械科技
 

网站建设行业资讯推荐阅读:


如何设计出更加完美的网站深圳福田网站制作需要多少钱,搭建一个网站需要些什么网站首页设计要把重中之重放到哪些地方将网站定位好,哪怕是菜鸟,也能翱翔蓝天企业版微信改变企业应用市场的未来网站制作改版后死链的处理方式介绍三部曲开启内容运营大门建设响应式网站有哪些好处网站流量下降的方法总结你知道几点建立网站如何降低成本深圳网站设计内容优化好的电商网站建设方案应该注意哪些品牌提高用户参与度的3个方法建设你的网站链接编程:6个简单的BUG追踪技巧营销型网站要如何做要注意哪些方面的内容网站设计中该如何应对视觉误差营销型网站制作中需要注意的三个重点深圳网站建设的页面布局设计0预算,2个月微信如何运营0到10000粉丝学校网站建设方案策划书深圳网站建设中如何能让您的网站在众多网站中脱颖而出 网站页面设计哪家服务好 网站建设过程中的容易出现哪些误区什么样的网页设计符合SEO要求广州网站制作怎么才能提升知名度深圳宝安网站建设为什么实用呢如何设计让网站更加灵活官网对公司的影响怎么跟客户沟通比较容易获得客户的企业建站意向未来网站建设时代是属于定制网站还是模板网站期权软件定制开发创建用户界面的小技巧深圳手机网站设计,手机网站设计的注意事项是什么建站:从零开始怎么制作公司网站做网站制作设计,有什么特殊的意义网站设计10条经验总结深圳如何建设一个高质量的企业网站挑房啦!看深圳网站建设如何给服务器选择机房小编讲解DNS系统与DDOS攻击的关系高端网站定制怎么做才能够提高定制的水平企业建站如何分析客户的需求使用基本的SEO规则和社会媒体来拓展业务影响网站建设中用户体验的操作有哪些传统行业转型互联网,网络营销可以起到哪些帮助-深圳网站建设分享DEDECMS迁移修改data目录保证深圳坪洲网站建设成功的方法是什么个人做网站建设的总体流程是怎样的网站推广的两个巧妙方法免费建站难道真的就是陷阱深圳网站设计丨如何通过设计思路提高设计能力企业在网站建设需要规避的问题深圳网站建设:整体风格的选择深圳网站设计小编教你绘制通透质感游戏按钮新型神推广方法--自动关注破坏企业网页设计的五个错误做法网站建设有什么优势企业网站推广优化中,这7条注意事项你要留意如何正确的设计网站导航大设计时代:针对超大网页布局的一些思考和建议
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询