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. 【专栏学习】APM——异步编程模型（.NET不推荐）

    (1)learning hard C#学习笔记 异步1:<learning hard C#学习笔记>读书笔记(20)异步编程 (2)<C# 4.0 图解教程> 22.4 异步编 ...

  2. Google搜索

    https://www.google.com/intl/br/insidesearch/tipstricks/all.html 如何用好谷歌等搜索引擎?

  3. Hadoop Avro支持多输入AvroMultipleInputs

    Avro 提供了1.x版本的AvroMultipleInputs,但是不支持2.x API版本,因此修改对应代码,增加对hadoop 2.x API版本的的支持 代码放在https://github. ...

  4. 【C#】WebApi 添加过滤器，实现对请求参数和响应内容的日志记录

    filter的介绍 filter在Web API中经常会用到,主要用于记录日志,安全验证,全局错误处理等:Web API提供两种过滤器的基本类型:actionfilterattribute,excep ...

  5. 2016-06-18 exshop第四天

    昨天本来想完成用asset-pipeline替换掉resource插件的工作,但由于进行了对spring security插件的文档解读,同时面试了4个人,每个人耗费了30分钟,并且公司下午4:30组 ...

  6. js写三级联动

    <!DOCTYPE HTML> <html> <head> <title>联动菜单</title> <meta charset=&qu ...

  7. 查看windows电脑CPU核心数,线程数

    在Windows中,在cmd命令中输入“wmic”,然后在出现的新窗口中输入“cpu get *”即可查看物理CPU数.CPU核心数.线程数.其中,  Name:表示物理CPU数  NumberOfC ...

  8. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第九集之安装Tomcat+Nginx反向代理Tomcat集群】

    1,安装Tomcat:和在windows下安装是一样的. 安装tomcat:上传后解压: tar -zxvf apache-tomcat-7.0.88.tar.gz -z:代表.gz格式的压缩包,-x ...

  9. tensorflow基础架构 - 处理结构+创建一个线性回归模型+session+Variable+Placeholder

    以下仅为自己的整理记录,绝大部分参考来源:莫烦Python,建议去看原博客 一.处理结构 因为TensorFlow是采用数据流图(data flow graphs)来计算, 所以首先我们得创建一个数据 ...

  10. python inspect 模块 和 types 模块 判断是否是方法，模块，函数等内置特殊属性

    python inspect 模块 和 types 模块 判断是否是方法,模块,函数等内置特殊属性 inspect import inspect def fun(): pass inspect.ism ...