一：介绍使用的知识点

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. 【UVA1401】Remember the Word Trie+dp

    题目大意:给定一个字符串和一个字符串集合,问从集合中选出若干个串组成给定母串的不同方案数. 题解:有些类似于背包问题.状态很好表示,为:\(dp[i]\) 表示母串前 i 个字符的不同方案数,因此,有 ...

  2. 监控IIS的运行状态

    IIS经常出现假死的情况,具体什么时候会出现假死,我就不说了,今天我要写的是如何监控IIS的状态. 程序的功能是:如果IIS是为运行的状态,就重启IIS,如果IIS的连接数达到了设置的连接数,也重启I ...

  3. RabbitMQ的安装部署

    RabbitMQ安装部署 一.软件准备 wget http://erlang.org/download/otp_src_19.3.tar.gz wget http://www.rabbitmq.com ...

  4. 关于swiper的tab(选项卡)中设置了autoHeight没有效果解决

    autoHeight属性使用看官网的示例:https://www.swiper.com.cn/api/parameters/294.html swiper的选项卡结构查看:https://www.sw ...

  5. Linux命令（五）免密码远程登录和配置别名

    1. ssh-keygen 2. ssh-copy-id -p port user@remote .ssh中建立并编辑config文件 原来需要 ssh -p ubuntu@xxx.xxx.xxx 现 ...

  6. GraphChi/graphchi-java程序配置

    1.导入graphchi-java maven项目时报错: Plugin execution not covered by lifecycle configuration: org.scala-too ...

  7. （32位）本体学习程序（ontoEnrich）系统使用说明文档

    系统运行:文件夹system下,可执行文件ontoEnrichment --------------------------------------------------------1.简单概念学习 ...

  8. Spring: 读取 .properties 文件地址,json转java对象,el使用java类方法相关 (十三)

    1. 在Java中获取 .properties 文件的路径 (src/main/resources 下) ProjectName |---src/main/java |---src/main/reso ...

  9. 【转】XMPP_3920_最靠谱的中文翻译文档

    CHENYILONG Blog XMPP_3920_最靠谱的中文翻译文档 Fullscreen © chenyilong. Powered by Postach.io Blog

  10. lrc歌词文件格式

    一.lrc文件有什么作用 lrc文件就是一个文本文件,用来记录歌曲的歌词信息,使得播放歌曲时能够让歌词与声音同步显示,类似于电影字幕那种效果. 心情很丧时我们会听首歌陶冶一下情操,不知你是否注意过音乐 ...