在Popup DIV中显示点击查询结果
仿照go2map中添加标注,实现了Server点击查询结果显示在Popup DIV中,该方法适用于查询固定字段。
1.
首先在页面中添加DIV块
在地图页面中事先添加好Popup DIV,并使之不显示。
1.
首先在页面中添加DIV块
在地图页面中事先添加好Popup DIV,并使之不显示。
<div id="poi_detail" style="position:absolute; z-index:8;left:500px; top:380px; visibility:hidden">
<table width="260" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9" height="7"><img src="image/top_left.gif" width="9" height="7"></td>
<td><img src="image/top_bg.gif" width="100%" height="7"></td>
<td width="9"><img src="image/top_right.gif" width="9" height="7"></td>
</tr><tr>
<td><img src="image/left_bg.gif" width="9" height="150"></td>
<td valign="top" bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#eeeeee"><span style="width:183px;font-size:14px;"><b>点击查询结果 </b></span> <img src="image/close2.gif" style="CURSOR: hand" width="46" align="absmiddle" height="16" onClick="document.getElementById('poi_detail').style.visibility ='hidden';"></td>
</tr><tr>
<td style="font-size:12px;"><b>项目编号:</b><input id="poi_id" name="" type="text" readonly="true" class="text-mm"></td>
</tr> <tr>
<td style="font-size:12px;"><b>项目名称:</b><input id = "poi_name" name="" type="text" readonly="true" class="text-mm"></td>
</tr>
</table>
</td>
<td><img src="image/right_bg.gif" width="9" height="150"></td>
</tr><tr>
<td height="7"><img src="image/bottom_left.gif" width="9" height="7"></td>
<td><img src="image/bottom_bg.gif" width="100%" height="7"></td> <td><img src="image/bottom_right.gif" width="9" height="7"></td> </tr>
</table>
</td>
</tr>
</table>
</div>
3.
设置查询GIS工具按钮
<esri:Tool DefaultImage="~/Images/identify.png" JavaScriptFile="" ServerActionAssembly="App_Code" HoverImage="~/Images/identify_HOVER.gif" ServerActionClass="CustomToolLibrary.IdentifyPopUpTool" ClientAction="Point" ToolTip="点击查询要素" SelectedImage="~/Images/identify_ON.gif" Name="点击查询"></esri:Tool>
4.页面结果返回处理JS函数
function showDetail(p1,p2,x,y)
{
var detaildiv = document.getElementById("poi_detail");
var mapdiv = document.getElementById("Map_Panel");
detaildiv.style.visibility="visible";
document.getElementById("poi_id").value = p1;
document.getElementById("poi_name").value = p2;
var left = parseInt(mapdiv.style.left) + parseInt(x);
var top = parseInt(mapdiv.style.top) + parseInt(y);
detaildiv.style.left = left + "px";
detaildiv.style.top = top + "px";
if(document.body.clientWidth < (left+260))
{
detaildiv.style.left = (left - 260) + "px";
}
if(document.body.clientHeight < (top+245))
{
detaildiv.style.top = (top - 165) + "px";
}
}
{
var detaildiv = document.getElementById("poi_detail");
var mapdiv = document.getElementById("Map_Panel");
detaildiv.style.visibility="visible";
document.getElementById("poi_id").value = p1;
document.getElementById("poi_name").value = p2;
var left = parseInt(mapdiv.style.left) + parseInt(x);
var top = parseInt(mapdiv.style.top) + parseInt(y);
detaildiv.style.left = left + "px";
detaildiv.style.top = top + "px";
if(document.body.clientWidth < (left+260))
{
detaildiv.style.left = (left - 260) + "px";
}
if(document.body.clientHeight < (top+245))
{
detaildiv.style.top = (top - 165) + "px";
}
}