一：介绍使用的知识点

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. Installshield 打包安装程序时写入注册表，及运行bat文件

    一.写入注册表 1. 打开project assistant –> Project Registry 可以像注册表里一样操作,其中[INSTALLDIR]是指的安装路径   二. 运行bat文件 ...

  2. 【bzoj2875】 Noi2012—随机数生成器

    http://www.lydsy.com/JudgeOnline/problem.php?id=2875 (题目链接) 题意 求${X_{n}}$. Solution 矩乘板子,这里主要讲下会爆lon ...

  3. 解题：BZOJ 2989 数列

    题面 学习二进制分组 题目本身可以看成二维平面上的问题,转成切比雪夫距离后就是矩形和了 二进制分组是将每个修改添加到末尾,然后从后往前二进制下进位合并,这样最多同时有$\log n$组,每个修改只会被 ...

  4. Linux上SSH登录远程服务器免密码

    在本地的客户端SSH到远程服务端时,每次都要输入用户名和密码,如果不想每次都输入密码则可以使用以下操作. 首先在本地的客户端输入 ssh-keygen [keysystem@localhost ~]$ ...

  5. redis添加systemctl服务

    1.编辑systemctl服务配置文件 vim /lib/systemd/system/redis.service 2.内容如下 [Unit]Description=RedisAfter=networ ...

  6. elasticsearch-dump 迁移es数据 （elasticdump）

    elasticsearch 部分查询语句 # 获取集群的节点列表: curl 'localhost:9200/_cat/nodes?v' # 列出所有索引: curl 'localhost:9200/ ...

  7. Java SSM框架之MyBatis3（七）MyBatis之参数取值

    在mybatis中,参数取值方式有两种:#{ } 和 ${ } 一.#{ } select * from student where name=#{name} 编译后执行的sql语句: select ...

  8. MongoDB探索之路（二）——系统设计之CRUD

    1.构造实体类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  9. html5 canvas显示文字（写上5个字，纪念我那刚刚逝去的爱情）

    <script type="text/javascript"> window.addEventListener('load',eventWindowLoaded,fal ...

  10. 编写 grunt 插件经验

    第一步: 先生成插件模板: 利用命令生成, 首先通过github工具获取gruntplugin模板文件: 第二步: 了解plugin/tasks/taskName.js的registerMultiTa ...