arcgis js 3.x 自定義infowindow

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.最終效果：