WebContent/WEB-INF/jsp/pc/activity/activityEdit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>活动介绍编辑</title>
		<link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/zzhnc/res/css/basic.css">
	</head>
	<style>
		.layui-form-select dl {
			max-height: 190px;
		}
		
		#allmap {
			top: 10px;
			width: 100%;
			height: 400px;
			overflow: hidden;
			margin: 0;
		}
	</style>

	<body class="wrap">
		<div class="layui-form Detailbtn" style="display:block;">
			<div class="layui-form-item">
				<label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>项目名称</label>
				<div class="layui-input-inline" style="width:390px;">
					<input type="text" name="name" lay-verify="name" placeholder="项目名称" class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">不超过20个汉字</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>海报模板</label>
				<div class="layui-input-inline">
					<select name="postertempletid" lay-search="">
						<option value="">全部</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">位置</label>
				<!--  <div class="layui-input-inline">
			      <input type="text" name="lng"  readonly lay-verify="required" placeholder="经度"  class="layui-input" style="background-color:#f5f5f5;color:#666;">
			    </div>
			    <div class="layui-input-inline">
			      <input type="text" name="lat" readonly lay-verify="required" placeholder="纬度"  class="layui-input" style="background-color:#f5f5f5;color:#666;">
			    </div> -->
				<div class="layui-input-inline">
					<input type="number" name="lng" lay-verify="required" placeholder="经度" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<input type="number" name="lat" lay-verify="required" placeholder="纬度" class="layui-input">
				</div>
			</div>
			<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=V45f8fZO8HiU1gLflQdrpv81D4gXKGRH"></script>
			<div class="layui-form-mid layui-word-aux" style="padding-bottom:0;">提示：可以在地图上点击位置获取坐标（鼠标滚动放大缩小地图）</div>
			<div id="allmap"></div>
			<div class="layui-form-item" style="margin-top: 30px;">
				<button class="layui-btn" lay-submit lay-filter="submit">提交</button>
				<button class="layui-btn layui-btn-primary resetBtn">重置</button>
			</div>
		</div>

	</body>

	<script src='/zzhnc/res/js/jquery.min.js'></script>
	<script src="/zzhnc/res/plugins/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="/zzhnc/res/js/me.js"></script>
	<script>
		// 百度地图API功能
		var map = new BMap.Map("allmap");
		var map = new BMap.Map("allmap", {
			minZoom: 4,
			maxZoom: 18
		}); // 创建Map实例,设置地图允许的最小/大级别
		map.enableScrollWheelZoom(true);

		//单击获取点击的经纬度
		map.addEventListener("click", function(e) {
			$("input[name=lng]").val(e.point.lng);
			$("input[name=lat]").val(e.point.lat);
			var allOverlay = map.getOverlays();
			if(allOverlay.length > 0) {
				function deletePoint() {
					for(var i = 0; i < allOverlay.length; i++) {
						map.removeOverlay(allOverlay[i]);
					}
				}
				deletePoint()
				var point = new BMap.Point(e.point.lng, e.point.lat);
				var marker = new BMap.Marker(point); // 创建标注
				map.addOverlay(marker); // 将标注添加到地图中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
			}
		});
		layui.use(['form', 'element', 'laydate', 'layer', 'laypage'], function() {
			var form = layui.form(),
				element = layui.element(),
				laydate = layui.laydate,
				layer = layui.layer,
				laypage = layui.laypage;

			$("input[name=lng],input[name=lat]").blur(function() {
				var plng = $("input[name=lng]").val();
				var plat = $("input[name=lat]").val();
				var allOverlay = map.getOverlays();
				if(allOverlay.length > 0) {
					function deletePoint() {
						for(var i = 0; i < allOverlay.length; i++) {
							map.removeOverlay(allOverlay[i]);
						}
					}
					deletePoint()
					var point = new BMap.Point(plng, plat);
					var marker = new BMap.Marker(point); // 创建标注
					map.addOverlay(marker); // 将标注添加到地图中
					marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

				}
			});

			//下拉海报
			$.post("/zzhnc/poster/getAllPostertemplet", function(data) {
				console.log(data);
				var str = "";
				for(var i = 0; i < data.data.length; i++) {
					str += '<option value=' + data.data[i].id + '>' + data.data[i].name + '</option>';
				}
				$("select[name=postertempletid]").append(str);
				form.render();
			})
			$(".resetBtn").on("click", function() {
				$("input[name=name]").val("");
				$("select[name=postertempletid]").val("0");
				var allOverlay = map.getOverlays();
				if(allOverlay.length > 0) {
					function deletePoint() {
						for(var i = 0; i < allOverlay.length; i++) {
							map.removeOverlay(allOverlay[i]);
						}
					}
					deletePoint()
				}
				$("input[name=lng]").val(113.754653);
				$("input[name=lat]").val(23.025333);
				map.centerAndZoom(new BMap.Point(113.754653, 23.025333), 13);
				var point = new BMap.Point(113.754653, 23.025333);
				var marker = new BMap.Marker(point); // 创建标注
				map.addOverlay(marker); // 将标注添加到地图中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				form.render();
			})
			var id = getUrl_G("id");
			if(id > 0) {
				$.post("/zzhnc/project/getProject", {
					id: id
				}, function(data) {
					console.log(data);
					if(data.code == 0) {
						$("input[name=name]").val(data.data.name);
						$("select[name=postertempletid]").val(data.data.postertempletid);
						$("input[name=lng]").val(data.data.lng);
						$("input[name=lat]").val(data.data.lat);
						map.centerAndZoom(new BMap.Point(data.data.lng, data.data.lat), 13);
						var point = new BMap.Point(data.data.lng, data.data.lat);
						var marker = new BMap.Marker(point); // 创建标注
						map.addOverlay(marker); // 将标注添加到地图中
						marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
						form.render();
					}
				})

			} else {
				$("input[name=lng]").val(113.754653);
				$("input[name=lat]").val(23.025333);
				map.centerAndZoom(new BMap.Point(113.754653, 23.025333), 13);
				var point = new BMap.Point(113.754653, 23.025333);
				var marker = new BMap.Marker(point); // 创建标注
				map.addOverlay(marker); // 将标注添加到地图中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

			}

			form.on('submit(submit)', function(data) {
				var name = $("input[name=name]").val();
				var templetid = $("select[name=postertempletid]").val();
				var lng = $("input[name=lng]").val();
				var lat = $("input[name=lat]").val();
				if(name == "") {
					top.layer.msg("请填写项目名称");
					return false;
				} else {
					if(strlen(name) > 40) {
						top.layer.msg("项目名称不超过20个汉字");
						return false;
					}
				}
				if(templetid == "" || templetid == "0") {
					top.layer.msg("请选择海报");
					return false;
				}

				if(id > 0) {
					//修改项目
					$.post("/zzhnc/project/updateProject", {
						id: id,
						name: name,
						templetid: templetid,
						lng: lng,
						lat: lat
					}, function(data) {
						console.log(data);
						if(data.code == 0) {
							top.layer.msg("修改成功");

						} else {
							top.layer.msg(data.msg);
						}
					})
				} else {
					//添加项目
					$.post("/zzhnc/project/addProject", {
						name: name,
						templetid: templetid,
						lng: lng,
						lat: lat
					}, function(data) {
						console.log(data);
						if(data.code == 0) {
							top.layer.msg("添加成功");
							form.render();
						} else {
							top.layer.msg(data.msg);
						}
					})
				}
				return false;

			});

		})
	</script>

</html>