1.引言：
在gis开发中，我们常常能用到弹出窗口，比如我们在地图上点击某个点要素是，弹出一个窗口，显示它相关的属性信息，很显然，这实际是通过infotemplate配置的。但是在实际中，我遇到的是通过该窗口填入相关属性信息，并且需要将属性信息保存到数据库里与该点几何相对应的记录上。
2.思路：
1)通过html创建弹出窗口；
2）重写infowindow的样式；
3）对infowindow设置标题、内容和显示位置；
3.代码：
1）自定义的弹出窗口的div(注意：infowindow的setcontent实际是相当于一个infowindow的父节点appendchild了自定义div的节点
<div id=\"add_name\"><label>名称</label><input id=\"input_name\"placeholder=\"我的标记\"></div>" +
" <div id=\"add_bz\"><label >备注</label><textarea id=\"input_bz\" rows=\"3\" cols=\"26\" placeholder=\"我的备注\"></textarea></div>" +
"<div id=\"add_btn\">\n" +
" <button id=\"add_save_btn\">保存</button>\n" +
" <button id=\"add_del_btn\">删除</button>\n" +
" </div>
2)重新infowindow的样式
/*弹出框*/
.esriPopup .esriPopupWrapper {
box-shadow: 0 0 0.75em #777777;
-webkit-box-shadow: 0 0 0.75em #777777;
border-radius: 5px;
-webkit-border-radius: 5px;
overflow: hidden;
}
.esriPopup .contentPane {
position: relative;
max-height: 300px;
overflow: auto;
padding: 10px 6px 6px 10px;
background-color: #F7F7F7;
color: #333333;
width: 270px;
height: 170px;
overflow: hidden;
}
.esriPopup .sizer {
position: relative;
width: 270px;
z-index: 1;
background-color: white;
}
.esriPopup .titlePane {
color:blue;
background-color: white;
line-height: 20px;
padding-left: 6px;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
cursor: default;
}
3）对infowindow设置标题、内容和显示位置；
map.infoWindow.setTitle("添加标注");
map.infoWindow.setContent(" <div id=\"add_name\"><label>名称</label><input id=\"input_name\"placeholder=\"我的标记\"></div>" +
" <div id=\"add_bz\"><label >备注</label><textarea id=\"input_bz\" rows=\"3\" cols=\"26\" placeholder=\"我的备注\"></textarea></div>" +
"<div id=\"add_btn\">\n" +
" <button id=\"add_save_btn\">保存</button>\n" +
" <button id=\"add_del_btn\">删除</button>\n" +
" </div>");
//添加点线面并保存到数据库
d.on("draw-end", function (evt) {
map.infoWindow.show(evt.geometry)
//点击弹出框保存按钮
document.getElementById("add_save_btn").onclick = function () {
map.infoWindow.hide();
4.最终效果：
