一：介绍使用的知识点

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. sqlplus执行startup出现ORA-00119,ORA-00132错误

    安装好了oracle后,执行如下操作: 执行startup后出现如下错误: ORA-00119: invalid specification for system parameter LOCAL_LI ...

  2. Nginx反向代理下IIS获取真实IP

    1. iis 如果放在反向代理后面,日志里的c-ip是反向代理服务器的ip,不是真正用户的ip,想要记录用户的ip要做两件事. 一.在反向代理设置X-Forwarded-For段,以下为nginx下的 ...

  3. linux driver error ------ 编译驱动出现 ERROR: Kernel configuration is invalid

       ERROR: Kernel configuration is invalid.         include/generated/autoconf.h or include/config/au ...

  4. idea2017破解方法

    破解方法 切换license server然后 输入网址:http://idea.iteblog.com/key.php即可

  5. Kafka 0.8 Consumer设计解析

    摘要 本文主要介绍了Kafka High Level Consumer,Consumer Group,Consumer Rebalance,Low Level Consumer实现的语义,以及适用场景 ...

  6. bzoj千题计划238：bzoj3668: [Noi2014]起床困难综合症

    http://www.lydsy.com/JudgeOnline/problem.php?id=3668 这..一位一位的来就好了呀 #include<cstdio> #include&l ...

  7. spring框架学习（二）使用注解代替xml配置

    注解 1.使用注解配置spring 1)开启使用注解代理配置文件 <?xml version="1.0" encoding="UTF-8"?> &l ...

  8. 小议 开源中国 I LOVE YOU js代码

    今天在开源中国看到一篇神作<I LOVE YOU js代码>是17号的文章了,也许你已经看过了. 文章非常有意思,由 5 个 "爱心" 组成的一段js代码,能正常执行, ...

  9. unp学习笔记——Chapter1

    1.发现网络拓扑的几个重要的命令 (1).netstat -i 提供网络接口的信息.我们还指定-n 标志以输出数值地址,而不是试图把它们反向解析成名字.netstat -r 展示路由表. dzhwen ...

  10. 各种卷积类型Convolution

    从最开始的卷积层,发展至今,卷积已不再是当初的卷积,而是一个研究方向.在反卷积这篇博客中,介绍了一些常见的卷积的关系,本篇博客就是要梳理这些有趣的卷积结构. 阅读本篇博客之前,建议将这篇博客结合在一起 ...