老生常谈H5新特性:地理定位-原创手记-慕课网

HTML5新特性

1.新的语义标签
2.表单2.0
3.视频和音频
4.Canvas绘图
5.SVG绘图
6.地理定位
7.拖放API
8.WebWorker
9.WebStorage
10.WebSocket

1.HTML5新特性——地理定位
地理定位：使用JS获取浏览器当前所在的地理坐标，实现LBS（Location Based Service，基于定位的服务），具体数据包括：
经度：longitude
纬度：latitude
海拔：altitude
速度：speed

技术上如何获取浏览器所在的定位信息：
(1)手机中的浏览器
靠手机内置的GPS芯片数据，精度在“米”级
靠手机与之通讯基站数据，精度在“公里”级
(2)PC中的浏览器
靠IP地址反向解析，精度在“公里”级

HTML5新增了用于获取浏览器所在定位的对象：

  window.navigator.geolocation {
    getCurrentPosition: fn  用于获取当前定位信息
    watchPosition: fn  不停的监视定位信息的改变
    clearWatch: fn 清除监视
  }

  navigator.geolocation.getCurrentPosition(
    funcntion(pos){
        console.log('定位成功');
    }, function(err){
        console.log('定位失败');
    }
  )

2.如何在页面中使用百度地图 —— 扩展小知识
从map.baidu.com下点击“地图开放平台”：
目前官网： http://lbsyun.baidu.com/
JS-API使用手册： http://lbsyun.baidu.com/index.php?title=jspopular
第三方工具的学习步骤：
(1)打开官网，找定义，功能说明
http://lbsyun.baidu.com/
可以基于百度地图进行Android、iOS、Web应用开发
http://lbsyun.baidu.com/index.php?title=jspopular
(2)找示例程序
(3)找API文档，编写自己的应用

3.使用百度地图API步骤：
(1)注册百度开发者账号
(2)使用开发者账号申请创建一个Web应用账号，获取一个访问百度地图的密钥（AccessKey）
http://lbsyun.baidu.com/apiconsole/key
(3)编写HTML网页，出示当前网站的访问密钥，调用百度地图API

  <script src="http://api.map.baidu.com/api?v=2.0&ak=您的网站在百度地图申请的访问秘钥 ">
  </script>

  //创建地图实例    
  var map = new BMap.Map();
  //创建一个指定的点 
  var p = new BMap.Point(,);
  //以指定点为中心显示地图
  map.centerAndZoom(, );