此文章为个人学习心血来潮笔记，有需要的欢迎各位指点品评，来公司实习第一天要求使用百度地图添加标注点然后使用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，新手不敢给建议。第一天写东西，不喜勿喷。我们一起加油，奥里给！！！
