主要思想：
从后台将数据库(包括图片、tabled的坐标信息)读出，然后拼成图片的显示信息以及显示的table信息。
前台写好鼠标onmouseup、onmousedown、onmousemove的事件即可。
前台代码：
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frmMap.aspx.cs" Inherits="frmMap" %>
<html>
<head id="Head1" runat="server">
<title>寿光农村合作银行：导航地图</title>
<link href="Styles/MainStyle1.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FFFFFF" text="#000000" onmousedown="initdrag()" onmousemove="startdrag()"
onmouseup="enddrag()" onselectstart="return false;" scroll="no">
<form id="form1" runat="server">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img id="imgMain" src="images/Map/map.jpg" galleryimg="no" ondblclick="showxy();" />
<%= l_img %>
</td>
</tr>
</table>
<%= g_strInfoStr %>
<div>
<fieldset class="fieldsetStyle">
<legend class="boldFont" align="left"><b>数据操作区域</b> </legend>
<table cellspacing="2" cellpadding="6">
<tr height="8px">
</tr>
<tr>
<td class="leftTd">
网点名称：
</td>
<td class="rightTd">
<asp:TextBox ID="txtName" CssClass="txtStyle" runat="server"></asp:TextBox>
</td>
<td class="leftTd">
业务范围：
</td>
<td class="rightTd">
<asp:TextBox ID="txtBus" CssClass="txtStyle" runat="server"></asp:TextBox>
</td>
<td class="leftTd">
营业部电话：
</td>
<td class="rightTd">
<asp:TextBox ID="txtYphone" CssClass="txtStyle" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="leftTd">
信贷部电话：
</td>
<td class="rightTd">
<asp:TextBox ID="txtXphone" CssClass="txtStyle" runat="server"></asp:TextBox>
</td>
<td class="leftTd">
支行总人数：
</td>
<td class="rightTd">
<asp:TextBox ID="txtPeo" CssClass="txtStyle" runat="server"></asp:TextBox>
</td>
<td class="leftTd">
备注：
</td>
<td class="rightTd">
<asp:TextBox ID="txtDesc" CssClass="txtStyle" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="leftTd">
横坐标：
</td>
<td class="rightTd">
<asp:TextBox ID="txtPosl" CssClass="txtStyle" runat="server"></asp:TextBox>
</td>
<td class="leftTd">
纵坐标：
</td>
<td class="rightTd">
<asp:TextBox ID="txtPost" CssClass="txtStyle" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="leftTd">
地址：
</td>
<td class="rightTd" colspan="3">
<asp:TextBox ID="txtAddr" CssClass="txtStyle" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="leftTd">
</td>
<td style="text-align: center" colspan="3">
<asp:Button ID="cmdAdd" runat="server" Text="保存" CssClass="cmdStyle" OnClick="cmdAdd_Click"/>
<asp:Button ID="cmdEdit" runat="server" Text="更新" CssClass="cmdStyle" Enabled="False" OnClick="cmdEdit_Click"/>
<input id="cmdClear" class="cmdStyle" type="button" value="清空" onclick="ClearCTR();" />
<asp:HiddenField ID="hid" runat="server" />
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
<script language="JavaScript">
<!--
//
var scrollcount=0;
var dragy;
var dragx;
var posx;
var posy;
var scrollarrowtop;
var scrollarrowleft;
function initdrag()
{
if(event.srcElement.tagName=="IMG")
{
scrollcount=1;
dragx=event.clientX;
dragy=event.clientY;
posx=event.offsetX;
posy=event.offsetY;
document.body.setCapture();
}
}
function startdrag()
{
if (scrollcount==1)
{
window.scrollBy(dragx-event.clientX,dragy-event.clientY);
document.body.style.cursor='move';
dragx=event.clientX;
dragy=event.clientY;
}
}
function enddrag()
{
document.body.style.cursor='';
scrollcount=0;
document.body.releaseCapture();
}
function showxy()
{
document.getElementById('txtPosl').value=event.offsetX;
document.getElementById('txtPost').value=event.offsetY;
}
function showresult()
{
document.getElementById('result').value=document.getElementById('txtPosl').value*document.getElementById('txtPost').value;
}
//************************************************************************
//************************************************************************
// -->
function showInfo(tbId)
{
document.getElementById(tbId).style.display='';
}
function hideInfo(tbId)
{
document.getElementById(tbId).style.display='none';
}
function loadDirection(flag)
{
window.open("/CallCenter/ZixunInfo/frmEditSub.aspx?flag="+flag+"&type=subOne","_self");
}
</script>
<script language="javascript">
window.scroll(100,720);
</script>
</html>
Code
后台代码：
Code1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12
13 public partial class frmMap : System.Web.UI.Page
14 {
15 public string l_img = "";
16 public string g_strInfoStr = "";
17 public string g_strImg = "";
18 public string[] g_strLeft = new string[14];
19 public string[] g_strTop = new string[14];
20 SQLHelper g_sqlConnection = new SQLHelper();
21 public string[] g_strImagFile = new string[14];
22 modal md = new modal();
23 CommandBeval cmdbeval = new CommandBeval();
24 protected void Page_Load(object sender, EventArgs e)
25 {
26 if (!IsPostBack)
27 {
28 if (Request.QueryString["cmdType"] != null)
29 {
30 ViewState["SUB_ID"] = Request.QueryString["SUB_ID"].ToString();
31 String sql = "select SUB_NAME,SUB_ADDRESS,SUB_BUSINESS,SUB_POSL,SUB_POST,SUB_YPHONE,SUB_XPHONE,SUB_PEOPLENO,SUB_PICTURE,SUB_DESC from C_SubbranchMaster where SUB_ID=" + ViewState["SUB_ID"].ToString();
32 DataTable reader = new DataTable();
33 g_sqlConnection.RunSQL(sql, ref reader, this.Page);
34 if (reader.Rows.Count > 0)
35 {
36 txtName.Text = reader.Rows[0].ItemArray.GetValue(0).ToString();
37 txtAddr.Text = reader.Rows[0].ItemArray.GetValue(1).ToString();
38 txtBus.Text = reader.Rows[0].ItemArray.GetValue(2).ToString();
39 txtPosl.Text = reader.Rows[0].ItemArray.GetValue(3).ToString();
40 txtPost.Text = reader.Rows[0].ItemArray.GetValue(4).ToString();
41 txtYphone.Text = reader.Rows[0].ItemArray.GetValue(5).ToString();
42 txtXphone.Text = reader.Rows[0].ItemArray.GetValue(6).ToString();
43 txtPeo.Text = reader.Rows[0].ItemArray.GetValue(7).ToString();
44 txtDesc.Text = reader.Rows[0].ItemArray.GetValue(9).ToString();
45 }
46 hid.Value = ViewState["SUB_ID"].ToString();
47 g_strInfoStr = getDrawInfo();
48 l_img = getimg();
49 cmdAdd.Enabled = false;
50 cmdEdit.Enabled = true;
51 }
52 else
53 {
54 g_strInfoStr = getDrawInfo();
55 l_img = getimg();
56 cmdAdd.Enabled = true;
57 cmdEdit.Enabled = false;
58 }
59 }
60 }
61 //得到图片的闪光效果
62 protected string getimg()
63 {
64 string l_strReturnStr = "";
65 //int cutX_ID = 0;
66 try
67 {
68 DataTable C_Sub = new DataTable();
69 g_sqlConnection.RunSQL("SELECT SUB_ID,SUB_NAME,SUB_YPHONE,SUB_XPHONE,SUB_POSL,SUB_POST,SUB_ADDRESS FROM C_SubbranchMaster", ref C_Sub, this.Page);
70 for (int i = 0; i < C_Sub.Rows.Count; i++)
71 {
72 string SUB_ID = C_Sub.Rows[i].ItemArray.GetValue(0).ToString();
73 ////得到分理处个数及ID
74 //string cutF_ID = g_sqlConnection.getReturnString("SELECT count(F_ID) FROM C_Fenlichu WHERE SUB_ID=" + SUB_ID, this.Page);
75 //DataTable C_Fen = new DataTable();
76 //g_sqlConnection.RunSQL("SELECT F_ID FROM C_Fenlichu WHERE SUB_ID=" + SUB_ID, ref C_Fen, this.Page);
77 ////获得协理员人数
78 //for (int j = 0; j < C_Fen.Rows.Count; j++)
79 //{
80 // string F_ID = C_Fen.Rows[i].ItemArray.GetValue(0).ToString();
81 // string C_Xie = g_sqlConnection.getReturnString("select count(X_ID) from C_Xieliyuan where F_ID=" + F_ID, this.Page);
82 // cutX_ID += Convert.ToInt16(C_Xie);
83 //}
84 if (C_Sub.Rows.Count > 0)
85 {
86
87 //设置位置
88 string l_strPosLeft = C_Sub.Rows[i].ItemArray.GetValue(4).ToString();
89 string l_strPosTop = C_Sub.Rows[i].ItemArray.GetValue(5).ToString();
90 //
91
92 //生成图片并设置位置
93 string tbId = "SG" + SUB_ID;
94 if (C_Sub.Rows[i].ItemArray.GetValue(1).ToString().Equals("支行"))
95 {
96 g_strImg = g_strImg + " <img id=img" + SUB_ID.ToString() + " src='images/Map/splash.gif'galleryimg='no' style='position: absolute;top:" + l_strPosTop + "px; left:" + l_strPosLeft + "px;'";
97 g_strImg = g_strImg + " onmouseover='javascript:showInfo(" + tbId + ");' onmouseout='javascript:hideInfo(" + tbId + ");' onclick='javascript:loadDirection(" + SUB_ID.ToString() + ");'/>";
98 g_strImagFile[i] = "splash.gif";
99 g_strLeft[i] = l_strPosLeft;
100 g_strTop[i] = l_strPosTop;
101 }
102 else
103 {
104 l_strPosLeft = Convert.ToString(Convert.ToInt32(l_strPosLeft) - 10);
105 l_strPosTop = Convert.ToString(Convert.ToInt32(l_strPosTop) - 13);
106 g_strImg = g_strImg + " <img id=img" + SUB_ID.ToString() + " src='images/Map/flag.gif' galleryimg='no' style='position: absolute;top:" + l_strPosTop + "px; left:" + l_strPosLeft + "px;'";
107 g_strImg = g_strImg + " onmouseover='javascript:showInfo(" + tbId + ");' onmouseleave='javascript:hideInfo(" + tbId + ");' onclick='javascript:loadDirection(" + SUB_ID.ToString() + ");'/>";
108 g_strImagFile[i] = "flag.gif";
109 g_strLeft[i] = l_strPosLeft;
110 g_strTop[i] = l_strPosTop;
111 }
112 l_strReturnStr += "<img id='img" + SUB_ID.ToString() + "' src='images/Map/" + g_strImagFile[i] + "' galleryimg='no' style='position:absolute;top:" + g_strTop[i] + "px;left:" + g_strLeft[i] + "px;' onmouseover=" + "javascript:showInfo('SG" + Convert.ToString(Convert.ToInt32(SUB_ID)) + "');" + " onmouseleave=" + "javascript:hideInfo('SG" + Convert.ToString(Convert.ToInt32(SUB_ID)) + "');" + " onclick='javascript:loadDirection(" + Convert.ToString(Convert.ToInt32(SUB_ID)) + ");' />";
113 }
114 }
115 return l_strReturnStr;
116 }
117 catch
118 {
119 return null;
120 Response.Redirect("/CallCenter/ERROR.ASPX?ID=1");
121 }
122
123 }
124 //得到鼠标聚焦显示TABLE的效果
125 public string getDrawInfo()
126 {
127 string l_strReturnStr = "";
128 int cutX_ID = 0;
129 try
130 {
131 DataTable C_Sub = new DataTable();
132 g_sqlConnection.RunSQL("SELECT SUB_ID,SUB_NAME,SUB_YPHONE,SUB_XPHONE,SUB_POSL,SUB_POST,SUB_ADDRESS FROM C_SubbranchMaster", ref C_Sub, this.Page);
133 for (int i = 0; i < C_Sub.Rows.Count; i++)
134 {
135 string SUB_ID = C_Sub.Rows[i].ItemArray.GetValue(0).ToString();
136 //得到分理处个数及ID
137 string cutF_ID = g_sqlConnection.getReturnString("SELECT count(F_ID) FROM C_Fenlichu WHERE SUB_ID=" + SUB_ID, this.Page);
138 DataTable C_Fen = new DataTable();
139 g_sqlConnection.RunSQL("SELECT F_ID FROM C_Fenlichu WHERE SUB_ID=" + SUB_ID, ref C_Fen, this.Page);
140 //获得协理员人数
141 for (int j = 0; j < C_Fen.Rows.Count; j++)
142 {
143 string F_ID = C_Fen.Rows[i].ItemArray.GetValue(0).ToString();
144 string C_Xie = g_sqlConnection.getReturnString("select count(X_ID) from C_Xieliyuan where F_ID=" + F_ID, this.Page);
145 cutX_ID += Convert.ToInt16(C_Xie);
146 }
147 if (C_Sub.Rows.Count > 0)
148 {
149
150 //设置位置
151 string l_strPosLeft = C_Sub.Rows[i].ItemArray.GetValue(4).ToString();
152 string l_strPosTop = C_Sub.Rows[i].ItemArray.GetValue(5).ToString();
153 //
154
155 //生成图片并设置位置
156 string tbId = "SG" + SUB_ID;
157 if (C_Sub.Rows[i].ItemArray.GetValue(1).ToString().Equals("支行"))
158 {
159 g_strImg = g_strImg + " <img id=img" + SUB_ID.ToString() + " src='images/Map/splash.gif'galleryimg='no' style='position: absolute;top:" + l_strPosTop + "px; left:" + l_strPosLeft + "px;'";
160 g_strImg = g_strImg + " onmouseover='javascript:showInfo(" + tbId + ");' onmouseout='javascript:hideInfo(" + tbId + ");' onclick='javascript:loadDirection(" + SUB_ID.ToString() + ");'/>";
161 g_strImagFile[i] = "splash.gif";
162 g_strLeft[i] = l_strPosLeft;
163 g_strTop[i] = l_strPosTop;
164 }
165 else
166 {
167 l_strPosLeft = Convert.ToString(Convert.ToInt32(l_strPosLeft) - 10);
168 l_strPosTop = Convert.ToString(Convert.ToInt32(l_strPosTop) - 13);
169 g_strImg = g_strImg + " <img id=img" + SUB_ID.ToString() + " src='images/Map/flag.gif' galleryimg='no' style='position: absolute;top:" + l_strPosTop + "px; left:" + l_strPosLeft + "px;'";
170 g_strImg = g_strImg + " onmouseover='javascript:showInfo(" + tbId + ");' onmouseleave='javascript:hideInfo(" + tbId + ");' onclick='javascript:loadDirection(" + SUB_ID.ToString() + ");'/>";
171 g_strImagFile[i] = "flag.gif";
172 g_strLeft[i] = l_strPosLeft;
173 g_strTop[i] = l_strPosTop;
174 }
175
176 //添加网点信息
177 string l_strAltMsg = "网点名称:" + C_Sub.Rows[i].ItemArray.GetValue(1).ToString() + "<br/>";
178 l_strAltMsg += "营业部电话:" + C_Sub.Rows[i].ItemArray.GetValue(2).ToString() + "<br/>";
179 l_strAltMsg += "信贷室电话:" + C_Sub.Rows[i].ItemArray.GetValue(3).ToString() + "<br/>";
180 if (C_Fen.Rows.Count == 0)
181 {
182 l_strAltMsg += "分理处:暂无<br/>";
183 }
184 else
185 {
186 l_strAltMsg += "分理处共" + cutF_ID.Trim() + "个<br/>";
187 }
188 if (Convert.ToString(cutX_ID).Trim() == "0")
189 {
190 l_strAltMsg += "协理员:暂无<br/>";
191 }
192 else
193 {
194 l_strAltMsg += "协理员总人数:" + cutX_ID + "个<br/>";
195 }
196 l_strAltMsg += "网点地址:" + C_Sub.Rows[i].ItemArray.GetValue(6).ToString() + "<br/>";
197
198 l_strReturnStr += "<table id='" + tbId + "' border='0' cellpadding='0' cellspacing='0'";
199 l_strReturnStr += "style='z-index:4000;cursor:hand;position:absolute;";
200 if (g_strImagFile[i] == "splash.gif")
201 {
202 l_strReturnStr += "left:" + g_strLeft[i] + "; ";
203 l_strReturnStr += "top:" + g_strTop[i] + "; display:none;'>";
204 }
205 else
206 {
207 l_strReturnStr += "left:" + Convert.ToString(Convert.ToInt32(g_strLeft[i]) + 10) + "; ";
208 l_strReturnStr += "top:" + Convert.ToString(Convert.ToInt32(g_strTop[i]) + 13) + "; display:none;' onclick='javascript:loadDirection(" + SUB_ID.ToString() + ");' onmouseover='javascript:showInfo('" +tbId+ "');' onmouseout='javascript:hideInfo('" +tbId+ "');' >";
209 }
210 l_strReturnStr += "<tr><td style='cursor:hand;' >";
211 l_strReturnStr += "</td><td bgcolor='blue'><font color='white'>";
212 l_strReturnStr += C_Sub.Rows[i].ItemArray.GetValue(1).ToString();
213 l_strReturnStr += "</font></td></tr><tr><td></td><td align='left' bgcolor='yellow'>" + l_strAltMsg.ToString() + "</td></tr></table>";
214 }
215 }
216 }
217
218 catch
219 {
220 return null;
221 Response.Redirect("/WXGL/ERROR.ASPX");
222 }
223 return l_strReturnStr;
224 }
225 //添加银行网点
226 protected void cmdAdd_Click(object sender, EventArgs e)
227 {
228 md.SUB_NAME = txtName.Text.Trim().ToString();
229 md.SUB_PEOPLENO = txtPeo.Text.Trim().ToString();
230 md.SUB_POSL = Convert.ToInt16(txtPosl.Text.Trim().ToString());
231 md.SUB_POST = Convert.ToInt16(txtPost.Text.Trim().ToString());
232 md.SUB_XPHONE = txtXphone.Text.Trim().ToString();
233 md.SUB_YPHONE = txtYphone.Text.Trim().ToString();
234 md.SUB_BUSINESS = txtBus.Text.Trim().ToString();
235 md.SUB_ADDRESS = txtAddr.Text.Trim().ToString();
236 md.SUB_DESC = txtDesc.Text.Trim().ToString();
237 int n = cmdbeval.AddSub(md);
238 if (n == 1)
239 {
240 //WriteLog("增加了咨询类型" + txtName.Text.ToString());
241 g_strInfoStr = getDrawInfo();
242 l_img = getimg();
243 txtName.Text = "";
244 txtAddr.Text = "";
245 txtBus.Text = "";
246 txtPeo.Text = "";
247 txtPosl.Text = "";
248 txtPost.Text = "";
249 txtDesc.Text = "";
250 txtYphone.Text = "";
251 txtXphone.Text = "";
252 txtName.Focus();
253 }
254 else if (n == 2)
255 {
256 Common.regAlertMessage("网点名称重复，请修改", this);
257 txtName.Focus();
258 }
259 else
260 {
261 Common.regAlertMessage("数据出现错误，请重新操作！", this);
262 txtName.Focus();
263 }
264 }
265 //修改银行网点
266 protected void cmdEdit_Click(object sender, EventArgs e)
267 {
268 md.SUB_ID = Convert.ToInt32(hid.Value.ToString());
269 md.SUB_NAME = txtName.Text.Trim().ToString();
270 md.SUB_PEOPLENO = txtPeo.Text.Trim().ToString();
271 md.SUB_POSL = Convert.ToInt16(txtPosl.Text.Trim().ToString());
272 md.SUB_POST = Convert.ToInt16(txtPost.Text.Trim().ToString());
273 md.SUB_XPHONE = txtXphone.Text.Trim().ToString();
274 md.SUB_YPHONE = txtYphone.Text.Trim().ToString();
275 md.SUB_BUSINESS = txtBus.Text.Trim().ToString();
276 md.SUB_ADDRESS = txtAddr.Text.Trim().ToString();
277 md.SUB_DESC = txtDesc.Text.Trim().ToString();
278 int n = cmdbeval.EditSub(md);
279 if (n == 1)
280 {
281 //WriteLog("修改了咨询类型" + txtName.Text.ToString());
282 g_strInfoStr = getDrawInfo();
283 l_img = getimg();
284 //txtName.Text = "";
285 //txtAddr.Text = "";
286 //txtXphone.Text = "";
287 //txtYphone.Text = "";
288 //txtBus.Text = "";
289 //txtPeo.Text = "";
290 //txtPosl.Text = "";
291 //txtPost.Text = "";
292 //txtDesc.Text = "";
293 //cmdAdd.Enabled = true;
294 //cmdEdit.Enabled = false;
295 Response.Redirect("ZixunInfo/frmEditSub.aspx");
296 }
297 else if (n == 2)
298 {
299 Common.regAlertMessage("网点名称重复，请修改", this);
300 txtName.Focus();
301 }
302 else
303 {
304 Common.regAlertMessage("数据出现错误，请重新操作！", this);
305 txtName.Focus();
306 }
307 }
308 }
309
310
Code
浙公网安备 33010602011771号