Popup DIV中显示点击查询结果

在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函数
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";
            }                    
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值