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>
IT文库 » HTML5的新特性–基础知识(6)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址