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. 一脸懵逼学习keepalived（对Nginx进行热备）

    1:Keepalived的官方网址:http://www.keepalived.org/ 2:Keepalived:可以实现高可靠: 高可靠的概念: HA(High Available), 高可用性集 ...

  2. poshytip基本使用

    js基本调用方法 $("#tips").poshytip({ content: $this.text(), alignTo: 'target', alignX: direction ...

  3. element-ui上传文件带token

    template> <el-upload action="test" :headers="myHeaders"></el-upload& ...

  4. canvas给图片加水印

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. NEST 之旅 · 开启

    NEST 之旅 · 开启 Version:5.x 英文原文地址:Getting started 说实话,这篇文章翻译的很糟糕.但是我的能力有限,目前只有这个水平,还望各位多指导. NEST 是 Ela ...

  6. Django项目和Django初体验和创建、目录结构认识

    .MVC的设计方式(跟Flask一样,都是MVC的设计模式) .开发效率高 .功能强大(丰富的第三方组件) .安全性高(帮助开发者规避安全漏洞) 目前市面上使用:Django>Flask #使用 ...

  7. 51Nod 部分题目 の 口胡&一句话题解

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod-One-Sentence.html 51Nod1404 先列出式子,然后搞成一个组合数.然后 luca ...

  8. AtCoder Grand Contest 026 (AGC026) E - Synchronized Subsequence 贪心 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/AGC026E.html 题目传送门 - AGC026E 题意 给定一个长度为 $2n$ 的字符串,包含 $n$ ...

  9. OpenSSL-Win64创建IdentityServer证书

    d:cd xx C:\OpenSSL-Win64\bin\openssl req -newkey rsa:2048 -nodes -keyout identity.key -x509 -days 36 ...

  10. Practice| 数组

    /* 从键盘确定班级的组号,在从键盘输入每一组的人数,并输入每一个学员的成绩,并求出,每一组的平均分, 全部的平均分,每一组的最高分,全部的最高分,并显示结果. */ class Test3{ pub ...