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

相关文章

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

MySQL 获取字符串长度及注意事项

《MySQL获取字符串长度及注意事项》本文通过实例代码给大家介绍MySQL获取字符串长度及注意事项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 获取字符串长度详解 核心长度函数对比⚠️ 六大关键注意事项1. 字符编码决定字节长度2

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》:本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动