一：介绍使用的知识点

1.地理定位的原理

　　

2.geolocation对象

　　

3.Geolocation Api

　　

4.getCurrentPosition的第一个参数

　　

5.getCurrentPosition的第二个参数

　　

6.getCurrentPosition的第三个参数

　　

7.watchPosition与clearPosition函数

　　

二：程序演示

1.注意点

　　需要将新写的程序放在本地的网站下

　　

2.启动程序

　　

3.程序--检验浏览器是否支持定位

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8/>

     <title>geolocation</title>

     <script src="D:\jquery\jquery-1.12.4.min.js"></script>

 </head>

 <body>

     <p id="geo_loc"></p>

     <script>

         if(navigator.geolocation){

             alert("support");

         }else{

             alert("do not support");

         }

     </script>

 </body>

 </html>

4.运行程序

　　 

5.程序--定位　

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8/>

     <title>geolocation</title>

     <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

 </head>

 <body>

     <p id="geo_loc"></p>

     <div style="width:697px;height:550px;border:#ccc solid 2px;" id="dituContent"></div>

     <script>

         if(navigator.geolocation){

             <!--alert("support");-->

             navigator.geolocation.getCurrentPosition(

                 function(p){

                     var latitude=p.coords.latitude;

                     var longitude=p.coords.longitude;

                     <!--alert(latitude+"---"+longitude);   //弹出经度维度-->

                     createMap(latitude,longitude);

                 },

                 function(e){

                     var err=e.code+"\n"+e.message;

                     alert(err);

                 }

             );

         }else{

             alert("do not support");

         }

         <!--百度地图的展示-->

         function createMap(a,b){

             var map=new BMap.Map("dituContent");

             var point=new BMap.Point(b,a);

             map.centerAndZoom(point,10);

             window.map=map;

         }

     </script>

 </body>

 </html>

6.运行结果

　　

H5地理位置定位的更多相关文章

  1. h5地理位置API

    h5地理位置API 地理API允许javascript程序向浏览器询问用户的真实地理位置,支持地理位置API的浏览器在访问前总是会询问用户是否允许. 获取用户地理的途径有:         1.ip地 ...

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

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

  3. html5 Geolocation(地理位置定位)学习

    1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...

  4. html5的地理位置定位

    html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理GPS, WIFI, IP, 手机信号基站 核心对象Geolocation是wi ...

  5. appium使用H5怎么定位元素

    允许是一个class,如果遇到有多个class,只能填写一个. 对于移动端H5元素定位采用Chromedriver的解决方案,具体操作如下: 1.手机安装Chrome浏览器 2.开启USB调试模式,并 ...

  6. 混合元素app的H5元素定位

    问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...

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

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

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

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

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

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

随机推荐

  1. NodeJS API Process全局对象

    Process 全局对象,可以在代码中的任何位置访问此对象,使用process对象可以截获进程的异常.退出等事件,也可以获取进程的当前目录.环境变量.内存占用等信息,还可以执行进程退出.工作目录切换等 ...

  2. Java基础-反射（reflect）技术详解

    Java基础-反射(reflect)技术详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.类加载器 1>.JVM 类加载机制  如下图所示,JVM类加载机制分为五个部分 ...

  3. Google-403-Forbidden

    Author:KillerLegend Date:2014.8.14 From:http://www.cnblogs.com/killerlegend/p/3913554.html www.googl ...

  4. Linux文本处理工具——Sed

    sed:数据流编辑器: awk:报告文本的生成器 sed 基本用法:(Stream EDitor) Stream 流 EDitor 编辑器 行编辑器 全屏编辑器:vi/vimsed:内存空间(模式空间 ...

  5. bzoj千题计划205：bzoj1966: [Ahoi2005]VIRUS 病毒检测

    http://www.lydsy.com/JudgeOnline/problem.php?id=1966 f[i][j] 表示s的前i个和t的前j个是否匹配 转移看代码 注意初始化: f[0][0]= ...

  6. 使用 maven 搭建web开发基本架构

    我觉得可能,对于还没有使用过 IDEA 进行开发的童鞋来说,直接撸代码是有些尴尬的.那么我会把示例代码之前的那些事再在这里写一遍 按图步骤进行即可进行基本项目结构搭建 现在基本流行 maven 管理项 ...

  7. [整理]javascript压缩、格式化

    1.使用packer来压缩JS文件 packer工具在线版:http://dean.edwards.name/packer/ 通过packer对js打包压缩的同时,执行Base62 encode编码后 ...

  8. 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题

    这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代 ...

  9. JavaScript继承详解（四）

    在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. Crockford是Java ...

  10. java学习第03天（运算符、语句）

    5.运算符 (1)算数运算符 //算数运算符:+ - * / %(取余) //++ --(自增,就是在原有数据基础上+1,再赋给原有数据) ///int x = 6370; //x = x/1000* ...