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, '"') +`)">修改</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