ASP.NET 用ImageMap动态添加HotSpot实现热点地图

先简要说下需求：

用个简单的实例来谈可能会清晰些。现在有一张全国地图，只标出了各个省；点击省出现省的地图，标明了市；点市出现市的地图，标明了区县。这样一层层的点。

高中的时候用图做个超链接，但是这个要用这样的方式做，那得做多少页面阿！的确有人提出用静态页面来做。

平台是：windows+vs2005+SQL Server

我最初就想到用ImageMap来做，但在网上查了很多资料也没找到方法。最后自己尝试出来了。

先在数据库建一个表：Map

字段有：ID，记录编号，自动增加 Int

ParentID：记录父记录的ID，Int

Name：记录名称

Path：图片路径

HotSpot：记录在附记录图片中的热区坐标

省级记录的ParentID,设置为0，

譬如：河北省的记录如下：ID为1，ParentID为0，Name为河北省，Path为河北省地图的相对路径，HotSpot为河北省在全国地图的热点坐标字符串。

那么石家庄市的记录可能就是：ID为5，ParentID为1，Name为石家庄市，Path为石家庄地图的相对路径，HotSpot为石家庄市在河北省地图的热点坐标字符串。

在VS2005中不能直接在图片上画热点，我没找到好的方法。我是直接在DW里画图片热点，然后把生成的坐标字符串复制出来。

页面加载后第一件事就是绑定热点，所以在Page_Load调用函数绑定热点。

然后ImageMap的HotSpotMode设置为Postback，响应click事件的方法里，从数据库里查询记录，绑定热点、PostbackValue和ImageMap的图片地址。

代码如下：

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

setHotSpot(0);



}

}

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)

{

int ID = int.Parse(e.PostBackValue);

DataTable dt=(DataTable)(ViewState["Table"]);

DataRow[] dr = dt.Select("ID=" + ID);

if (dr.Length > 0)

{

ImageMap1.ImageUrl = "../" + dr[0]["Path"];

}

else

{

return;

}

setHotSpot(ID);

}

private void setHotSpot(int ParentID)

{

ViewState["Table"] = null;//清空上一次保存的值

ImageMap1.HotSpots.Clear();//清除上一次添加的热点

string strSql="select * from lot_Map where ParentID="+ParentID;

DataTable dt=SqlHelper.ExecuteDataTable(strSql);

foreach (DataRow dr in dt.Rows)

{

PolygonHotSpot sp = new PolygonHotSpot();

sp.Coordinates = dr["HotSpot"].ToString();

sp.PostBackValue = dr["ID"].ToString();

sp.HotSpotMode = HotSpotMode.PostBack;



ImageMap1.HotSpots.Add(sp);

}

ViewState["Table"] = dt;

}