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. openCV 备忘

    yum install python-devel numpy cmake gcc gcc-c++yum install gtk2-devel libdc1394-devel libv4l-devel ...

  2. MySQL主从备份配置实例

    转载自:https://www.cnblogs.com/ahaii/p/6307648.html MySQL主从备份配置实例 场景: 1.主服务器192.168.0.225.从服务器192.168.0 ...

  3. [转] mongoose学习笔记（超详细）

    名词解释 Schema: 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model: 由Schema编译而成的假想(fancy)构造器,具有抽象属性和行为.Model的每一个实例(ins ...

  4. java的局部变量和成员变量以及区别

    一.局部变量 存在某个方法中的变量就叫局部变量,局部变量一旦声明就必须赋值 否则不能使用 代码如下: class Person { String name; char sex; int age; pu ...

  5. NEST - Elasticsearch 的高级客户端

    NEST - High level client Version:5.x 英文原文地址:NEST - High level client 个人建议:学习 NEST 的官方文档时,按照顺序进行,不宜跳来 ...

  6. 分享几个在线生成网址二维码的API接口

    现在很多大网站都有这样的一个功能,使用手机扫描一下网页上的二维码便可快速在手机上访问网站.想要实现这样的功能其实很简单,下面麦布分享几个在线生成网址二维码的API接口.都是采用http协议接口,无需下 ...

  7. ERROR 000732:Output Geodatabase:Dataset Database Connections\Connection to localhost.sde\SDE.Dataset does not exist or is not supported

    ArcCatalog 10中向SDE 数据集导入要素类时,出错:ERROR 000732:Output Geodatabase:Dataset Database Connections\Connect ...

  8. 给定两个字符串 s 和 t，它们只包含小写字母。 字符串 t 由字符串 s 随机重排，然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。

    给定两个字符串 s 和 t,它们只包含小写字母.字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母.请找出在 t 中被添加的字母. 示例: 输入: s = "abcd" ...

  9. MYSQL总览

    第一,二,三范式解决的是非主属性的关系.BC 范式解决的是主属性的关系:第二范式:就是完全依赖,没有部分依赖([id,b]->c 即不能c即依赖id又依赖b):[非主属性不能依赖于主键的一部分, ...

  10. Java集合及LIst接口

    一.集合的概念 1.概述: 在学习集合前,先回忆一下数组的一个特征---数组有固定的长度,定义一个数组: int[] array = new int[]; 而针对数据长度可变的情况,产生了集合, ja ...