一：介绍使用的知识点

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. 洛谷 P1412 经营与开发 解题报告

    P1412 经营与开发 题目描述 \(4X\)概念体系,是指在\(PC\)战略游戏中一种相当普及和成熟的系统概念,得名自4个同样以"\(EX\)"为开头的英语单词. \(eXplo ...

  2. 几种简单的排序算法（JAVA）

    几种排序算法(JAVA) 一.代码 package com.hdwang; import java.util.Arrays; /** * Created by admin on 2017/1/20. ...

  3. 在Linux中将脚本做成系统服务

    有一些情况下,我们需要将某些脚本作为系统服务来运行.比如,在我使用workerman框架开发php程序时,需要使用管理员权限来运行,而且需要开机自行启动程序提供服务.这个时候将启动程序写成服务就可以很 ...

  4. 实战：使用SVN+apache搭建一个版本控制服务器

    今天讲的内容: 实战:使用SVN+apache搭建一个版本控制服务器 每天: 10:00 晚上:21:00 服务端:xuegod63.cn   IP:192.168.10.63 服务概述: SVN(s ...

  5. python的内置模块之os模块方法详解以及使用

    1.getcwd() 获取当前工作路径 import os print(os.getcwd()) C:\python35\python3.exe D:/pyproject/day21模块/os模块.p ...

  6. 初识python面向对象编程

    初识python面向对象编程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.面向过程的程序设计思想 #!/usr/bin/env python #_*_coding:utf-8 ...

  7. spring boot 事务配置

    事务的作用这里不细说,相信很多人也在工作中使用过. 那么在spring-boot是如何配置事务的,事实上非常简便. 直接贴代码吧. 首先配置数据源  myqlDataSource,这个就不说了.之前的 ...

  8. 关于Html class id 命名规范

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  9. 考研：操作系统：进程同步—信号量实现同步互斥（PV操作）

    进程互斥的硬件实现方法

  10. 20155304 2016-2017-2 《Java程序设计》第七周学习总结

    20155304 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 1.时间的度量: 格林威治标准时间(GMT)通过观察太阳而得,其正午是太阳抵达天空最高点之时 ...