HTML5的新特性--基础知识（6）

拖放API：

 两个存储系统：localStorage和sessionStorage

 localStorage多个标签访问同一个网站，各个标签都可以看到保存的数据

 storage事件：存储空间每次发生变化时，都会触发这个事件。所以可以通过这个事件通知同一程序的每个窗口。目前主要是在Safari浏览器中兼容比较好。

 语法：window.addEventListener('storage',updateNum,false);

 Geolocation:在h5中提供的一组地理定位，最早是Google提出的

 Geolocation API用于将用户当前地理位置信息共享给信任的站点

 Geolocation API位于navigator对象中，只有3个方法：

 getCurrentPosition():获取当前位置

 watchPosition():

 clearWatch():主要是清除watchPosition

 getCurrentPosition的核心内容：

 语法：navigator.geolocation.getCurrentPosition(success_callback,error_callback,{geolocation选项})

 function success_callback(){//获取位置成功后的操作}

 function error_callback(error){//获取位置失败后的操作，error为自动传入，错误对象有error.code（获取错误编号）和error.message(获取错误的详细信息)}

 是一个回调函数

 参数：

 success_callback：用户允许共享geolocation的回调

 error_callback：获取地理位置失败的回调，传入错误对象，包含code（错误编号），message（错误信息）属性

 选项：enableHighAccuracy:是否更精确读取经纬度，默认false

 获取成功时：position属性有

 coords:

  latitude:当前位置的纬度

  longitude:当前位置的经度

  altitude：海拔，海平面以上以米计

  speed：速度，以米/秒计

 例：

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

   <style>

   </style>

   <script>

      function $(id){

          return document.getElementById(id);

      }

      //获取数据添加到localStorage中

      function btnAdd_click(){

          var key=$("txtFirstName").value;

          var val=$("txtLastName").value;

          localStorage.setItem(key,val);

          window.alert("保存成功");

      }

      function showAll_click(){

          //length获取已保存数据的数量

          var length=localStorage.length;

          var html="";

          for(var i=0;i<length;i++){

              //通过索引找到key:key(index)

              var key=localStorage.key(i);

              var val=localStorage.getItem(key);

              html+="<tr><td>"+key+"</td><td>"+val+"</td></tr>";

              $("tBody").innerHTML=html;

          }

      }

   </script>

  </head>

  <body>

     key:<input id="txtFirstName"  /><br/>

     val:<input id="txtLastName"  /><br/>

     <input type="button" id="btnAdd" onclick="btnAdd_click()" value="保存" />

     <input type="button" id="showAll" onclick="showAll_click()" value="显示所有" />

     <table border="1px">

        <thead>

          <tr>

            <th>Key</th>

            <th>Val</th>

          </tr>

        <thead>

        <tbody id="tBody"></tbody>

     </table>

  </body>

 </html>

 例：

 <!DOCTYPE HTML>

 <html>

  <head>

   <meta charset="utf-8"/>

   <title> New Document </title>

   <style>

   </style>

   <script>

     window.onload=function(){

         var geo=navigator.geolocation;

         geo.getCurrentPosition(function(position){

             //获取定位信息成功时，执行的操作

             //position：获取定位信息的对象，包含属性coords

             //coords:latitude(纬度),longitude(经度)，altitude（海拔高度，单位为米），speed（当前行驶速度）

             var lat=position.coords.latitude;

             var lon=position.coords.longitude;

             console.log("纬度："+lat+"经度"+lon);

         },function(error){

             //获取定位信息失败时，执行的操作

             //属性code：错误编号

             //属性message:错误信息

             console.log("错误编号"+error.code);

             console.log("错误信息"+error.message);

         });

     }

   </script>

  </head>

  <body>

  </body>

 </html>

 首先申请使用百度开发者，就能申请百度密钥（ak）,这样就能用API

 http://developer.baidu.com/map/

 百度地图API：

 构造函数：Map("containerId")

 var map=new BMap.Map("allmap");

 定位显示城市及缩放比例：

 centerAndZoom(point/cityName,level)如：map.centerAndZoom("北京市",12);

 启动鼠标滚轮更改显示比例：enableScrollWheelZoom(true)

 添加缩放平移控件：addControl(new BMap.NavigationControl());

 添加比例尺：addControl(new BMap.ScaleControl());

 导入地图操作代码：

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ">

 </script>

 我注册的百度开发者ak:  4agS27TTVDx5CnKXYgP7bkftsPGphN03

 获取当前设备的地理位置：Geolocation对象

    var geolocation=new BMap.Geolocation();

 通过getCurrentPosition事件，传递position参数获取当前位置

 geolocation.getCurrentPosition(function(position,error){})

 getStatus()判断获取地理信息的状态，状态码由百度地图API提供，共有8个

 BMAP_STATUS_SUCCESS表示检索用户地理位置成功，对应值"0"

 通过position参数获取当前设备的地理位置

 position.point:表示当前地理坐标对象

 position.point.lng:当前位置经度

 position.point.lat:当前位置的纬度

 Marker(point):创建覆盖物即标点

 map.addOverlay(marker):将覆盖物添加到地图上

 map.panTo(point):将地图中心点移动到指定点上

 例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

   <title>  </title>

   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>

   <script>

     window.onload = function(){

         //得到百度地图， 并且显示在allmap中

         var map = new BMap.Map("allmap");

         //设置显示的中心点城市以及缩放比例

         map.centerAndZoom("北京市",12);

         //启用滚轮更改显示比例

         map.enableScrollWheelZoom(true);

         //创建缩放平移控件

         var nc = new BMap.NavigationControl();

         //将缩放平移控件添加到地图上

         map.addControl(nc);

         //添加比例尺控件

         map.addControl(new BMap.ScaleControl());

         //获取地理位置 ： 通过  百度 Geolocation 对象

         var geolocation = new BMap.Geolocation();

         //通过geolocation 获取用户当前位置 : getCurrentPosition

         geolocation.getCurrentPosition(function(position){

             //position 表示已获取的地理位置信息对象

             //position.point : 表示当前地理位置坐标点(包含经纬度)

             //position.point.lng : 表示当前的经度

             //position.point.lat : 表示当前的纬度

             if(this.getStatus() == BMAP_STATUS_SUCCESS){

                 //如果正确获取到信息(检索成功)

                 var lng = position.point.lng;

                 var lat = position.point.lat;

                 console.log("经度：" + lng + ",纬度：" + lat);

                 //创建 Marker 即覆盖物 , position.point 就是当前位置的点 类型为BMap.Point

                 var marker = new BMap.Marker(position.point);

                 //将marker添加到地图上  addOverlay(marker);

                 map.addOverlay(marker);

                 //将地图的中心移动到 position.point处

                 map.panTo(position.point);

                 //定位中鼎大厦

                 var coder = new BMap.Geocoder();

                 //通过getPoint方法，进行地理定位

                 coder.getPoint("中鼎大厦",function(point){

                     var newMar = new BMap.Marker(point);

                     map.addOverlay(newMar);

                     //将中心移至point处

                     map.centerAndZoom(point,16);

                 });

             }

         });

     }

   </script>

  </head>

  <body>

     <div id="allmap" style="width:400px;height:300px;border:1px solid black;"></div>

  </body>

 </html>