LayUI简单使用

时间 2021-01-06 标签百度地图API Layui

此文章为个人学习心血来潮笔记，有需要的欢迎各位指点品评，来公司实习第一天要求使用百度地图添加标注点然后使用Layui添加单击事件。我好久没搞前端的这些玩意儿，做的时候废了大力气。ps:假装自己菜，一下为通过百度拾取坐标系统获得目标的经纬度，显示标注点。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <style type="text/css">
       body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
       #allmap{height:500px;width:100%;}
       #r-result{width:100%;}
   </style>
   <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=d0VddzOTGL0PPnIpX3cj4TWUNAhiBZyd"></script>
   <title>添加/删除覆盖物</title>
</head>
<body>
   <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
   // 百度地图API功能
   var map = new BMapGL.Map("allmap");
   // 初始化地图,
   var point = new BMapGL.Point(118.87526,32.01746);
   //设置中心点坐标和地图级别
   map.centerAndZoom(point, 15);
//   map.centerAndZoom(new BMap.Point(118.87526,32.01746), 11);
   map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
   var marker = new BMapGL.Marker(new BMapGL.Point(118.87526,32.01746)); // 创建点


   //添加覆盖物
   function add_overlay(){
       map.addOverlay(marker);            //增加点
//       map.addOverlay(marker1);            //增加点
   }
   add_overlay();
</script>

没什么技术含量，只是搬运了API，以下是使用Layer添加单击事件

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>单击事件</title>
       <script src="js/jquery-3.4.1/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="layer/layer.js"></script>

   </head>
   <body>
       <input type="button" name="textPoint" id="textPoint" value="11" />
   </body>
</html>
<script type="text/javascript">
   $(function(){
       $("input").click(function(){
       var val = $(this).val();
       var that = this;
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
        ,title: '当你选择该窗体时，即会在最顶端'
        ,area: ['390px', '260px']
        ,shade: 0
        ,maxmin: true
        ,offset: [ //为了演示，随机坐标
          Math.random()*($(window).height()-300)
          ,Math.random()*($(window).width()-390)
        ]
        ,content: 'test.html'
        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
        ,

//以下两个回调函数为btn点击效果

        yes: function(){
          $(that).click();
        }
        ,btn2: function(){
          layer.closeAll();
        }

        ,zIndex: layer.zIndex //重点1
        ,success: function(layero){
          layer.setTop(layero); //重点2
        }
      });
       });
   })
</script>

至于Layui、layer、laydate去查官方API，新手不敢给建议。第一天写东西，不喜勿喷。我们一起加油，奥里给！！！