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

相关文章

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目,需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径,以下

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

PHP应用中处理限流和API节流的最佳实践

《PHP应用中处理限流和API节流的最佳实践》限流和API节流对于确保Web应用程序的可靠性、安全性和可扩展性至关重要,本文将详细介绍PHP应用中处理限流和API节流的最佳实践,下面就来和小编一起学习... 目录限流的重要性在 php 中实施限流的最佳实践使用集中式存储进行状态管理(如 Redis)采用滑动

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法:1

深入浅出Spring中的@Autowired自动注入的工作原理及实践应用

《深入浅出Spring中的@Autowired自动注入的工作原理及实践应用》在Spring框架的学习旅程中,@Autowired无疑是一个高频出现却又让初学者头疼的注解,它看似简单,却蕴含着Sprin... 目录深入浅出Spring中的@Autowired:自动注入的奥秘什么是依赖注入?@Autowired

PostgreSQL简介及实战应用

《PostgreSQL简介及实战应用》PostgreSQL是一种功能强大的开源关系型数据库管理系统,以其稳定性、高性能、扩展性和复杂查询能力在众多项目中得到广泛应用,本文将从基础概念讲起,逐步深入到高... 目录前言1. PostgreSQL基础1.1 PostgreSQL简介1.2 基础语法1.3 数据库

Python中的filter() 函数的工作原理及应用技巧

《Python中的filter()函数的工作原理及应用技巧》Python的filter()函数用于筛选序列元素,返回迭代器,适合函数式编程,相比列表推导式,内存更优,尤其适用于大数据集,结合lamb... 目录前言一、基本概念基本语法二、使用方式1. 使用 lambda 函数2. 使用普通函数3. 使用 N