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 地理位置定位API（2）的更多相关文章

  1. HTML5 地理位置定位API（1）

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  2. HTML5 地理位置定位API（3）

    HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了h ...

  3. HTML5 地理位置定位API（5）

    HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...

  4. HTML5 地理位置定位API（4）

    地理定位(geolocation)是最令人兴奋,而且得到了广泛支持的一个新API.通过这套API, JavaScript代码能够访问到用户的 当前位置信息.当然,访问之前必须得到用户的明确许可,即同意 ...

  5. HTML5 地理位置定位（HTML5 Geolocation）原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  6. [Javascript] HTML5 地理位置定位（HTML5 Geolocation）原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  7. 使用HTML5地理位置定位到城市的方法及注意事项

    介绍 本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位.实现效果为显示出用户所在的省市,即: XXX省 XXX市. 实现思路 利用HTML5 提供的API获取到用户的 ...

  8. html5地理位置定位功能小析

    Geolocationd 基本原理1.GPS    GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...

  9. HTML5地理定位API在chrome中不能正常使用

    navigator.geolocation.getCurrentPosition在chrome中不能正常使用. 经测试发现,FQ后就能正常使用,估计是因为chrome 对这个API的实现使用了goog ...

随机推荐

  1. Python Django开发遇到的坑（版本不匹配）

    这个问题 进入django 后台, 添加,修改都不可以,只有删除可以,那么百分之百是这个问题 对照一下,是你的django 版本低了还是 python版本高了,对照的话就没问题了 这个坑,弄了两天啊! ...

  2. 透过CountDownLatch窥探AQS

    本文来自公众号“Kahuna”,可搜索Alitaba119,欢迎关注,转载请注明出处,非常感谢 “ A synchronization aid that allows one or more thre ...

  3. python实现查找算法

    搜索是在一个项目集合中找到一个特定项目的算法过程.搜索通常的答案是真的或假的,因为该项目是否存在. 搜索的几种常见方法:顺序查找.二分法查找.二叉树查找.哈希查找 线性查找线性查找就是从头找到尾,直到 ...

  4. 前端学习笔记--Visual Studio Code安装及中文显示

    1.在官网https://code.visualstudio.com/下载对应的版本: 2.安装 一路点击下一步,选中  添加到PATH后,安装. 安装成功,可以直接打开使用: 把界面改成中文显示: ...

  5. matlab(6) Regularized logistic regression : plot data(画样本图)

    Regularized logistic regression :  plot data(画样本图) ex2data2.txt 0.051267,0.69956,1-0.092742,0.68494, ...

  6. 在使用rem布局的时候，遇到的样式排版混乱问题，

    在使用rem布局的时候,遇到的样式排版混乱问题, 问题1:设置字体为rem单位,但是没有设置line-height为100%, 即    * {             line-height: 1; ...

  7. Nginx反爬虫： 禁止某些User Agent抓取网站

    问题 之前客户能够正常访问的一个网站这几天访问很慢,甚至有时候还拒绝访问.通过Nginx访问日志排查,发现有大量的请求指向同一个页面,而且访问的客户端IP地址在不断变化且没有太多规律,很难通过限制IP ...

  8. 2019牛客暑期多校训练营（第十场）Han Xin and His Troops——扩展中国剩余定理

    题意 求解 $n$ 个模方程 $x \equiv a (mod \ b)$,不保证模数互素($1 \leq n \leq 100$,$0 \leq b < a< 10^5$). 分析 套扩 ...

  9. yum安装出现No package crontabs available解决办法

    其意思是:yum中不存在这个包 所以解决办法是 1.更新yum   更新yum仓库: yum -y update 2.查看包名在yum中是什么   yum search  all crontabs

  10. js与json的区别，json的概述，json与面向对象，json与对象的转换

    <script> //js与json的区别,json的概述,json与面向对象,json与对象的转换 //json的概述:json(javascript object Notation,j ...