H5

weixin_39616739

于 2019-07-28 15:02:05 发布

阅读量117

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/weixin_39616739/article/details/97614533

版权

H5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. geolocation——定位
1.原理
PC端：IP地址精度非常差
移动：GPS 精度很高
2.PC端
IP库
Chrome -> google.com -> ?
IE -> microsoft.com

getCurrentPosition 获取位置(1次)

watchPosition 不断获取位置
clearWatch

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    .bmap {width:600px; height:400px; border:1px solid black}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script>
    window.onload=function (){
      var oBtn=document.getElementById('btn1');

      oBtn.onclick=function (){
        //getCurrentPosition(成功, 失败, 参数)
        navigator.geolocation.getCurrentPosition(function (res){

          console.log(res.coords);
          alert('成功');

          //创建和初始化地图函数：
          function initMap(){
            createMap();//创建地图
            setMapEvent();//设置地图事件
            addMapControl();//向地图添加控件
            addMapOverlay();//向地图添加覆盖物
          }
          function createMap(){
            map = new BMap.Map("bmap");
            map.centerAndZoom(new BMap.Point(res.coords.longitude,res.coords.latitude),15);
          }
          function setMapEvent(){
            map.enableScrollWheelZoom();
            map.enableKeyboard();
            map.enableDragging();
            map.enableDoubleClickZoom()
          }
          function addClickHandler(target,window){
            target.addEventListener("click",function(){
              target.openInfoWindow(window);
            });
          }
          function addMapOverlay(){
            var markers = [
              {content:"来找我啊",title:"我的位置",imageOffset: {width:0,height:3},position:{lat:res.coords.latitude,lng:res.coords.longitude}}
            ];
            for(var index = 0; index < markers.length; index++ ){
              var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
              var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
                imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
              })});
              var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
              var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
              };
              var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
              marker.setLabel(label);
              addClickHandler(marker,infoWindow);
              map.addOverlay(marker);
            };
          }
          //向地图添加控件
          function addMapControl(){
            var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
            scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
            map.addControl(scaleControl);
            var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
            map.addControl(navControl);
            var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
            map.addControl(overviewControl);
          }
          var map;
            initMap();
        }, function (err){
          alert('失败');
        });
      };
    };
    </script>
  </head>
  <body>
    <input type="button" value="定位" id="btn1">
    <div class="bmap" id="bmap">

    </div>
  </body>
</html>

2.localStorage：5M/域名
1.域名、跨域
2.极其方便
3.用途：
记录用户名
保存草稿

localStorage 永久存储
sessionStorage 会话期间存储——浏览器一关就没

保存草稿
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    window.onload=function (){
      let oTxt=document.getElementById('txt1');
      let oBtn=document.getElementById('btn1');

      oTxt.value=localStorage.tmp_txt||'';

      oTxt.oninput=function (){
        localStorage.tmp_txt=oTxt.value;
      };

      oBtn.onclick=function (){
        alert('发送完成');

        delete localStorage.tmp_txt;
      };
    };
    </script>
  </head>
  <body>
    <textarea rows="28" cols="80" id="txt1"></textarea>
    <input type="button" name="" value="发送" id="btn1">
  </body>
</html>

3.canvas
1.路径操作：
相当于选区——没有效果，还需后续操作
闭合——一定要用closePath
2.边线：stroke()
3.填充：fill()

线宽：lineWidth
线色：strokeStyle
填充颜色：fillStyle

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    body {background: black; text-align:center;}
    #c1 {background:#fff;}
    </style>
    <script>
    window.onload=function (){
      let oC=document.getElementById('c1');

      //图形上下文——接口：所有绘图方法、属性
      let gd=oC.getContext('2d');

      //路径操作——类似PS的选区

      //起点
      gd.moveTo(470, 81);
      gd.lineTo(778, 236);
      gd.lineTo(532, 411);
      gd.lineTo(312, 259);
      //gd.lineTo(470, 81);     //?
      gd.closePath();

      //gd.lineWidth=20;
      //gd.strokeStyle='green';
      //gd.stroke();

      gd.fillStyle='yellow';
      gd.fill();
    };
    </script>
  </head>
  <body>
    <canvas id="c1" width="800" height="600"></canvas>
  </body>
</html>