Geolocation：地理定位，获取当前浏览器所在的地理坐标信息（包括经度、纬度、海拔高度、移动速度），实现LBS应用(Location Based Service)——基于定位的服务，如订   餐、面对面XX、导航、消息推送等。官网：http://lbsyun.baidu.com/

技术上如何获取浏览器所在的地理坐标：

(1)手机浏览器：

可以通过自带的GPS芯片与卫星定位通信——精确在m级；

还可以通过手机通信基站来定位——精度在km级

(2)PC浏览器：

通过IP地址反向推导出浏览器定位信息——精度在km级

HTML5提供了一个新的对象，专用于读取地理定位信息：

window.navigator.geolocation {

getCurrentPosition()：得到当前定位信息

watchPosition()：监视定位数据的改变

clearWatch()：清除定位监视

}

核心代码：

   navigator.geolocation.getCurrentPosition(

        function(pos){  //定位成功

            console.log(pos.timestamp)

             console.log(pos.coords.longitude/latitude/altitude/speed );

   },

   function(err){   //定位失败

      console.log(err.code  +  err.message);

  }

 );

在自己的网页中嵌入百度地图，实现步骤：

(1)在页面中引入百度地图应用JS文件

<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">

</script>

(2)编写代码，调用百度地图API，在自己的网页中显示地图内容

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

var point = new BMap.Point(116.300982,39.916078);

map.centerAndZoom(point, 17);

完整代码示例：

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>百度地图 hDZD6X3OarYgLs4El0BsaY9GOI21sF3a</title>

<style type="text/css">

  html{height:100%}

  body{height:100%;margin:0px;padding:0px}

  #container{height:600px;width:800px; margin: 0 auto;}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥">

//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"

//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"

</script>

</head>  

<body>  

<div id="container"></div> 

<script type="text/javascript">

  var map = new BMap.Map("container");   // 创建地图实例

  var point = new BMap.Point(120.062607,30.385093);  // 创建点坐标

  map.centerAndZoom(point, 15);   // 初始化地图，设置中心点坐标和地图级别

  map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用

  map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用 

  var marker = new BMap.Marker(point);  // 创建标注

  map.addOverlay(marker);               // 将标注添加到地图中

  marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

</script>

</body>

</html>

　　

百度地图相关插件:https://github.com/HLJMT

HTML5 — 地理定位的更多相关文章

  1. 基于浏览器的HTML5地理定位

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

  2. HTML5地理定位(已知经纬度，计算两个坐标点之间的距离)

    事实上,地球上任意两个坐标点在地平线上的距离并不是直线,而是球面的弧线. 下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离.半正矢公式也成为Haversine公式,它最早时航海学中的重 ...

  3. HTML5地理定位，百度地图API，知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  4. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  5. 手机端网页使用html5地理定位获取位置失败的解决办法

    网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...

  6. 第182天：HTML5——地理定位

    HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支 ...

  7. HTML5地理定位

    1.通过navigator.geolocation来获取设备当前位置,返回一个位置对象,可以获得当前经纬度相关信息: 2.navgatior.geolocation的三个方法: getCurrentP ...

  8. Html5——地理定位及地图

    常用的navigator.geolocation对象有以下三种方法: 获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callbac ...

  9. HTML5地理定位-Geolocation API

    HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息Geolocation API使用方法:1.判断是否支持 navigator.geol ...

随机推荐

  1. win10远程桌面出现身份验证错误。要求的函数不受支持

    打开组策略,依次展开“计算机配置”->“管理模板”->“系统”->“凭据分配”,设置名称: “加密 Oracle 修正” 为已启用,并设置保护级别为“易受攻击”

  2. dubbo的工作原理

    dubbo工作原理 第一层:service层,接口层,给服务提供者和消费者来实现的 第二层:config层,配置层,主要是对dubbo进行各种配置的 第三层:proxy层,服务代理层,透明生成客户端的 ...

  3. Hyper-V 替换 vmwp

    要激活 Hyper-V 下的虚机 最简单的方法是用带证书的vmwp替换掉原来的 带证书的vmwp参见:http://bbs.pcbeta.com/viewthread-1408240-1-1.html ...

  4. Bootstraptable源码

    // @author 文志新 http://jsfiddle.net/wenyi/47nz7ez9/3/ /**关于插件的通用构造 * * 构造函数PluginName($trigger,option ...

  5. JSP基础知识➣Cookie和Session（五）

    JSP Cookie 处理 Cookie是存储在客户机的文本文件,它们保存了大量轨迹信息.在servlet技术基础上,JSP显然能够提供对HTTP cookie的支持.JSP脚本通过request对象 ...

  6. [转]Tor Browser在国内Windows平台下的超详细教程

    https://cloudfra.com/tor-browser-windows.html 下载与安装 首先,你必须身处科学式网络(实在怕网站再出问题),接着就可以点击打开Tor Browser官网, ...

  7. 【转】如何向Android模拟器打电话发短信

    转载地址:http://hi.baidu.com/jeremylai/item/420f9c9fe4881fccb62531f7 1. 启动Android Emulator, 查看标题栏找出端口.一般 ...

  8. admin密码对应的MD5值

    admin密码对应的MD5值,16位和32位 admin密码对应的MD5值,16位和32位 admin的md5值是多少,常用密码加密md5值,123456,admin,admin888 如果遇到MD5 ...

  9. windows云服务器数据迁移

    刚入职,第一个任务是完成windows腾讯云到windows华为云上的MySQL数据库迁移.之前都是在CentOS上搞,感觉没啥难度,一口答应,没想到各种坑接踵而来.次数不再叙述坑都有哪些了,说说怎么 ...

  10. log4j.xml 报告集成

    等级: trace< debug<info<warn<error<fatal trace 追踪 deug: eclipse, Log4j配置   [1]从零开始 a). ...