HTML5 Geolocation API (地理位置应用程序接口)获取地理位置

本文主要是介绍HTML5 Geolocation API (地理位置应用程序接口)获取地理位置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HTML5 Geolocation API (地理位置应用程序接口)

目前PC浏览器支持情况:

Firefox 3.5+
Chrome 5.0+
Safari 5.0+
Opera 10.60+
Internet Explorer 9.0+

手机支持情况:

Android 2.0+
iPhone 3.0+
Opera Mobile 10.1+
Symbian (S60 3rd & 5th generation)
Blackberry OS 6
Maemo

检测浏览器是否支持:

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

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

复制代码
void getCurrentPosition(onSuccess,onError,options);
//获取用户当前位置int watchCurrentPosition(onSuccess,onError,options);
//持续获取当前用户位置void clearWatch(watchId);
//watchId 为watchCurrentPosition返回的值
//取消监控
复制代码

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

options:

options = {enableHighAccuracy,   //boolean 是否要求高精度的地理信息timeout,         //表示等待响应的最大时间,默认是0毫秒,表示无穷时间maximumAge        /应用程序的缓存时间
}

onsuccess方法中会返回position对象,通过这个对象可以获取地理位置的相关信息

 

复制代码
<!DOCTYPE html>  
<html>  
<head>  <meta charset="utf-8"/>  <title>基于浏览器的HTML5查找地理位置</title> <!-- 百度API --><script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>  <script>function getLocation(){var options={enableHighAccuracy:true, maximumAge:1000}if(navigator.geolocation){//浏览器支持geolocation
                   navigator.geolocation.getCurrentPosition(onSuccess,onError,options);}else{//浏览器不支持geolocation
               }}//成功时function onSuccess(position){//返回用户位置//经度var longitude =position.coords.longitude;//纬度var latitude = position.coords.latitude;//使用百度地图API//创建地图实例  var map =new BMap.Map("container");//创建一个坐标var point =new BMap.Point(longitude,latitude);//地图初始化,设置中心点坐标和地图级别  
               map.centerAndZoom(point,15);}//失败时function onError(error){switch(error.code){case 1:alert("位置服务被拒绝");break;case 2:alert("暂时获取不到位置信息");break;case 3:alert("获取信息超时");break;case 4:alert("未知错误");break;}}window.onload=getLocation;</script>
</head>
<body><div id="container" style="width:600px;height:600px"></div>
</body>
</html>
复制代码

 

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

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

这篇关于HTML5 Geolocation API (地理位置应用程序接口)获取地理位置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1043932

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

SpringBoot服务获取Pod当前IP的两种方案

《SpringBoot服务获取Pod当前IP的两种方案》在Kubernetes集群中,SpringBoot服务获取Pod当前IP的方案主要有两种,通过环境变量注入或通过Java代码动态获取网络接口IP... 目录方案一:通过 Kubernetes Downward API 注入环境变量原理步骤方案二:通过

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

使用Python实现获取屏幕像素颜色值

《使用Python实现获取屏幕像素颜色值》这篇文章主要为大家详细介绍了如何使用Python实现获取屏幕像素颜色值,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、一个小工具,按住F10键,颜色值会跟着显示。完整代码import tkinter as tkimport pyau

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》:本文主要介绍在Python中获取命令行(cmd)环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中,总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061

Python使用Tkinter打造一个完整的桌面应用

《Python使用Tkinter打造一个完整的桌面应用》在Python生态中,Tkinter就像一把瑞士军刀,它没有花哨的特效,却能快速搭建出实用的图形界面,作为Python自带的标准库,无需安装即可... 目录一、界面搭建:像搭积木一样组合控件二、菜单系统:给应用装上“控制中枢”三、事件驱动:让界面“活”

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

《如何确定哪些软件是Mac系统自带的?Mac系统内置应用查看技巧》如何确定哪些软件是Mac系统自带的?mac系统中有很多自带的应用,想要看看哪些是系统自带,该怎么查看呢?下面我们就来看看Mac系统内... 在MAC电脑上,可以使用以下方法来确定哪些软件是系统自带的:1.应用程序文件夹打开应用程序文件夹