Popup DIV中显示点击查询结果

最新推荐文章于 2022-04-07 15:20:24 发布

转载最新推荐文章于 2022-04-07 15:20:24 发布 · 1.1k 阅读

文章标签：

#div #border #table #class #function #server

ARCGIS 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种在地图应用中实现点击查询并显示结果的方法。通过预先设置隐藏的PopupDIV，结合特定的GIS工具按钮及JavaScript函数，可以将查询到的信息以弹窗形式展示在地图上。

在Popup DIV中显示点击查询结果

仿照go2map中添加标注，实现了Server点击查询结果显示在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函数