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. Centos+Redis 集群

    Redis 3.2.6集群搭建 Redis3.0版本之后支持Cluster. 1.1.redis cluster的现状 目前redis支持的cluster特性: 1):节点自动发现 2):slave- ...

  2. Java连接MySQL数据库三种方法

    好久没有更新博客了!今天利用周目时学习了一下数据库mysql.介绍一下数据库的三种连接方式! 开发工具:Myeclipse MySQL5.6 MySQL连接驱动:mysql-connector-jav ...

  3. python manage.py runserver指定端口和ip

    python manage.py runserver 0.0.0.0:8000 在本地运行程序,python manager.py runserver打开http://127.0.0.1:5000端口 ...

  4. Codeforces 653F Paper task SA

    Paper task 如果不要求本质不同直接st表二分找出最右端, 然后计数就好了. 要求本质不同, 先求个sa, 然后用lcp求本质不同就好啦. #include<bits/stdc++.h& ...

  5. appium---第四个脚本，进入app，有权限弹窗的方法

    1.以淘宝为例:进入首页,会弹出好几个权限弹窗 无法使用id定位 用xpath定位

  6. c# 调apicontroller

    public string Post(ModelCs mod) { string formData = Newtonsoft.Json.JsonConvert.SerializeObject(mod) ...

  7. asp grid 增加和删除行数据

    <table border="0" cellpadding="0" cellspacing="0" style="width ...

  8. MySQL高级01

    MySQL支持大型数据库,支持5000万条记录的数据仓库,32位系统表文件最大可支持4GB,64位系统支持最大的表文件为8TB. 官网下载地址:http://dev.mysql.com/downloa ...

  9. GIT结合android studio使用总结

    使用GIT前请阅读(有git基础可略过) git指引 :http://www.bootcss.com/p/git-guide/ 一. 下载git  http://git-scm.com/downloa ...

  10. 【LeetCode算法-13】Roman to Integer

    LeetCode第13题 Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symb ...