【自学笔记】天地图的标注上打开窗口并保存信息

1.这一次有个需求：不仅仅是添加标记，顺带添加该点的备注信息并保存。

打开窗口效果

保存后的效果

js相关代码

$(function() {
	//标注按钮(新建)做得事情
	$(".tagbox #markbtn1").click(function () {
		markerTool.open();
		endeditMarker();
		//完成标注时
		markerTool.addEventListener("mouseup",function(e){
			editInfo(e)}
		);
	});
	//标注按钮(关闭)做得事情
	$(".tagbox #markbtn2").click(function () {
		markerTool.close();
		endeditMarker();
	});
	//标注按钮(编辑)做得事情
	$(".tagbox #markbtn3").click(function () {
		editMarker();
	});
});
function editInfo(e){
	//e对象包括：currentLnglat:：用户在地图上标的坐标。currentMarker：用户当前的标注点对象。allMarkers：用户使用工具所有的标注点对象。
	var point = e.currentLnglat;
	currentMarker = e.currentMarker
	// console.log(currentMarker)
	markInfoWin = new T.InfoWindow()// 创建信息窗口对象
	//设置信息窗口要显示的内容
	sContent =
		`
		<div style="height: 200px;width:100%">
			<div style="height: 30px;width: 100%;background-color: #dfe4ea;border-bottom: #dcecf9 1px solid;text-align: center"><p style="line-height:30px;margin-left: 5px;color: #57606f;font-weight: bold">添加标记</p></div>
<!--			<div>-->
			<form id="markform">
				<label for="markname"style="color: #57606f">名称</label>
				<input id="markname"type="text"name="markname"style="outline:none;height: 30px;width:89%;margin: 10px 0" placeholder="我的标记"><br>
				<label for="myremark"style="color: #57606f">备注</label>
				<textarea id="myremark" style="outline:none;vertical-align: top;padding: 3px" name="myremark" cols="30" rows="5"></textarea>
				<input id="lng"type="hidden"value="${point.lng}"name="lng">
				<input id="lat"type="hidden"value="${point.lat}"name="lat">
				<input type="button"value="保存" style="outline: none;border:none;float: right;margin-top: 10px;height: 25px;width: 50px;background-color:#dddddd;color: #57606f" οnclick="markSubmit()">
			</form>
<!--			</div>-->
		</div>
		`;
	markInfoWin.setContent(sContent);
	markInfoWin.setOffset(new T.Point(8,1))
	map.openInfoWindow(markInfoWin,point); //开启信息窗口
}
//标记备注信息，点击保存时触发，ajax方式向后端发送数据，避免用action属性来将页面刷新（即可以不把发送给后的数据放到页面上给用户看到）。
function markSubmit() {
	var markname = $('#markname').val()
	var myremark = $('#myremark').val()
	var lng = $('#lng').val()
	var lat = $('#lat').val()
	if(markname == ""){
		layer.open({
			title: '警告',
			content: '请填写该点名称！'
		});
	    return false;
	}else if(myremark == ""){
		layer.open({
			title: '提示',
			content: '请填写该点一些备注吧！'
		});
		return false;
	}
	$.ajax({
		//几个参数需要注意一下
		type: "POST",//方法类型
		dataType: "json",//预期服务器返回的数据类型
		url: "addmaker" ,//url
		data: $('#markform').serialize(),
		success: function (result) {
			var resultdata = JSON.parse(result)
			if(resultdata.statusCode === 200){
				layer.msg('保存成功');
				//markid是后端数据库每条记录的唯一编号。目的：通过markid修改数据
				var markid=resultdata.markid
				//返回数据成功之后改变信息窗口
				markupdate([markname,myremark,lng,lat,markid])
				//当点击该新点时出现信息窗口
				currentMarker.addEventListener("click",function(){
					//如果窗口关闭就创建。有个不完善的地方：有两个新的标注的已经关闭，再想打开，不能同时打开，只能打开一个
					if (markInfoWin.isOpen()==false){
						markupdate([markname,myremark,lng,lat,markid])
					}
				}
				);
			}
		},
		error : function() {
			layer.open({
				title: '提示',
				content: '保存数据异常！'
			});
		}
	});
}
function markupdate(markinfo){
	// var markInfoWin1 = new T.InfoWindow()// 创建信息窗口对象
	//设置信息窗口要显示的内容
	sContentUpDate =
		`
		<table style=" width:250px;border-collapse: separate;font-size:14px;border-spacing:0 6px;table-layout:fixed;">
			<caption style="font-weight:bold;font-size:15px;">标记信息</caption>
			<tr><td style=" width: 30%;font-weight:bold;text-align:left;">标注点:</td><td style="text-align:left;width:80%;word-break:break-all;">${markinfo[0]}</td></tr>
			<tr><td style=" font-weight:bold;text-align:left;">备注信息:</td><td style="text-align:left;word-break:break-all;">${markinfo[1]}</td></tr>
			<tr><td></td><td style="text-align:right;"><button style="margin-top: 10px;outline: none;border:none;right: 41px;height: 25px;width: 50px;background-color:#dddddd;color: #57606f" οnclick="modifyMarker1(`+ JSON.stringify(markinfo).replace(/"/g, '&quot;') +`)">修改</button></td></tr>
		</table>
		`;
	//更新该点的窗口内容
	markInfoWin.update()
	//再次把内容添加上去
	markInfoWin.setContent(sContentUpDate);
	markInfoWin.setOffset(new T.Point(10,-1))
	map.openInfoWindow(markInfoWin,new T.LngLat(lng,lat)); //开启信息窗口
}
//使用layer.js的弹窗功能，在弹窗中添加表单修改标注点的信息
function modifyMarker1(markinfos){
	layer.open({
		type: 1,
		title: '修改',
		area: ['320px', '250px'],
		shadeClose: true, //点击遮罩关闭
		content: `
			<form id="modifyform">
				<table style="margin:0 10px;width:300px;border-collapse: separate;font-size:14px;border-spacing:0 15px;table-layout:fixed;">
					<tr>
						<td style=" width: 10%;font-weight:bold;text-align:left;"><label for="markname"style="color: #57606f">名称</label></td>
						<td style="text-align:left;width:60%;word-break:break-all;">
							<input id="markname" value="${markinfos[0]}" type="text" name="markname"style="outline:none;height: 30px;width:98%;padding-left: 3px">
						</td>
					</tr>
					<tr>
						<td style="font-weight:bold;text-align:left;">
							<label for="myremark"style="color: #57606f">备注</label>
						</td>
						<td style="text-align:left;width:80%;word-break:break-all;">
							<textarea id="myremark" style="outline:none;vertical-align: top;padding:5px" name="myremark" cols="32" rows="5"></textarea>
						</td>
					</tr>
					<tr>
						<td><input type="hidden"name="markid"value="${markinfos[4]}"></td>
						<td>
							<input type="button"value="保存" style="outline: none;border:none;float: right;height: 25px;width: 50px;background-color:#dddddd;color: #57606f"onclick="modifySubmit()">
						</td>
					</tr>
				</table>
		  	</form>`
    });
	document.getElementById("myremark").value=markinfos[1]
}
//提交修改的数据给后端
function modifySubmit(){
	// console.log("000000000000000000000000000000000000000000000000000000")
		$.ajax({
		//几个参数需要注意一下
		type: "POST",//方法类型
		dataType: "json",//预期服务器返回的数据类型
		url: "modify" ,//url
		data: $('#modifyform').serialize(),
		success: function (result) {
			var resultdata = JSON.parse(result)
			if(resultdata.statusCode === 200){
				//提示
				layer.msg('保存成功');
				//保存成功刷新
				setTimeout("location.reload()",1000);
			}
		},
		error : function() {
			layer.open({
				title: '提示',
				content: '保存数据异常！'
			});
		}
	});
}

好记性不如烂笔头，打算把博客作为学习工具，记录理解的知识点方便后面查看，顺便记录成长点滴。我是一名技术小白，我会一直努力学习，若文章有不对的地方，欢迎大家指正，我的邮箱：xiaoheizhu3306@163.com