案例如下:http://www.goufang.com/AgentSys/House/HouseInfoListMap.aspx?deptid=
參考答案:这是他的代码,自己更改下用吧!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="VisualStudio.HTML" name="ProgId">
<meta content="Microsoft Visual Studio .NET 7.1" name="Originator">
<LINK href="style/main.css" type="text/css" rel="stylesheet">
<script language="javascript" src="scripts/pos.js"></script>
<SCRIPT language="JavaScript" event="onmousedown" for="document">if( event.button%2 !=0 )doMouseDown( event);</SCRIPT>
<SCRIPT language="JavaScript" event="oncontextmenu" for="document">doContextMenu( event );return false;</SCRIPT>
<SCRIPT language="JavaScript" event="onmousemove" for="document">doMouseMove( this, event );</SCRIPT>
<SCRIPT language="JavaScript" event="onmouseup" for="document">if( event.button%2 !=0 )doMouseUp( this, event );</SCRIPT>
<SCRIPT language="JavaScript" event="onkeydown" for="document">doKeyDown( event );</SCRIPT>
<SCRIPT language="JavaScript" event="onkeyup" for="document">doKeyUp( event );</SCRIPT>
</head>
<body onload="onpageload();" leftMargin="0" topMargin="0" onload="onpageload();">
<form id="Form1" method="post" action="mapsearch_work.aspx" target="workiframe">
<table border="0" cellpadding="0" cellspacing="0" style="WIDTH: 800px; HEIGHT: 512px" ID="Table1">
<tr>
<td colspan="2" height="10"> </td>
</tr>
<tr>
<td width="600" height="20">
<span>坐标X:</span>
<INPUT id="showposx" name="showposx" type="text" size="5">
<span>Y:</span><INPUT id="showposy" name="showposy" type="text" size="5"> <INPUT onclick="gotoinputpos();" type="button" value="定位" ID="Button7" NAME="Button7">
<INPUT id="autocenter" type="checkbox" checked NAME="autocenter">准星居中 <INPUT id="autoczoom" type="checkbox" NAME="autozoom">自动缩放
<INPUT id="autosearch" type="checkbox" checked NAME="autosearch" onclick = "showsometomap();">实时搜索
</td>
<td width="200" height="20">
<INPUT id="posx" name="posx" style="WIDTH: 0px; HEIGHT: 22px" type="hidden"> <INPUT id="posy" name="posy" style="WIDTH: 0px; HEIGHT: 22px" type="hidden">
<INPUT id="winx" name="winx" style="WIDTH: 0px; HEIGHT: 22px" type="hidden"> <INPUT id="winy" name="winy" style="WIDTH: 0px; HEIGHT: 22px" type="hidden">
<INPUT id="starx" name="starx" style="WIDTH: 0px; HEIGHT: 22px" type="hidden"> <INPUT id="stary" name="stary" style="WIDTH: 0px; HEIGHT: 22px" type="hidden">
<INPUT id="houseid" name="houseid" style="WIDTH: 0px; HEIGHT: 22px" type="hidden"><INPUT id="arearadius" value="2000" name="arearadius" style="WIDTH: 0px; HEIGHT: 22px"
type="hidden">
</td>
</tr>
<tr>
<td width="600" height="450">
<DIV id="" style="OVERFLOW: hidden;WIDTH: 100%;HEIGHT: 100%">
<DIV id="getposdiv" style="OVERFLOW: hidden;WIDTH: 100%;HEIGHT: 100%">
<IMG id="getposmap" src="_usermap/m_dl_4000.jpg" style="LEFT: 0px; WIDTH: 600px; POSITION: absolute; TOP: 0px">
<IMG id="posstar" src="_usermap/posstar.gif" style="FILTER: alpha(opacity=70); LEFT: 275px; WIDTH: 75px; POSITION: absolute; TOP: 200px; HEIGHT: 75px">
<IMG id="selectarea" src="_usermap/selectarea.gif" style="DISPLAY:none;FILTER:alpha(opacity=70);LEFT:119px;WIDTH:362px;POSITION:absolute;TOP:44px;HEIGHT:362px">
</DIV>
<DIV id="movemap" style="LEFT: 10px;WIDTH: 200px;POSITION: absolute;TOP: 20px;HEIGHT: 300px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="moveupleft" src="_usermap/upleft.gif"></td>
<td width="29" align="center" valign="top"><img id="moveup" src="_usermap/up.gif"></td>
<td><img id="moveupright" src="_usermap/upright.gif"></td>
</tr>
<tr>
<td><img id="moveleft" src="_usermap/left.gif"></td>
<td align="center" valign="middle"><img id="movecenter" src="_usermap/refresh.gif"></td>
<td align="right"><img id="moveright" src="_usermap/right.gif"></td>
</tr>
<tr>
<td><img id="movedownleft" src="_usermap/downleft.gif"></td>
<td align="center" valign="bottom"><img id="movedown" src="_usermap/down.gif"></td>
<td><img id="movedownright" src="_usermap/downright.gif"></td>
</tr>
<tr height="29">
<td></td>
<td align="center" valign="bottom"><img id="zoombig" src="_usermap/add.gif"></td>
<td></td>
</tr>
<tr height="211">
<td></td>
<td style="BACKGROUND-POSITION-X: center;BACKGROUND-REPEAT: repeat-y;background-image:url(_usermap/a_t.gif);">
<div id="zoomposdiv" style="WIDTH:29px;POSITION:absolute;HEIGHT:100%"><img id="zoompos" src="_usermap/a_f.gif" style="LEFT:4px;POSITION:absolute;TOP:200px"></div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center" valign="top"><img id="zoomsmall" src="_usermap/sub.gif"></td>
<td></td>
</tr>
<tr>
<td></td>
<td id="bilichi" align="center" valign="bottom">100m</td>
<td></td>
</tr>
<tr>
<td colspan="3" align="center" valign="bottom"><img src="_usermap/scale_A.jpg"></td>
</tr>
</table>
</DIV>
<DIV id="showpoints" style="LEFT: 0px;WIDTH: 0px;POSITION: absolute;TOP: 0px;HEIGHT: 0px">
</DIV>
</DIV>
</td>
<td width="180" height="120">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" ID="Table2">
<tr>
<TD width="10" height="120"> </TD>
<td height="120">
<DIV style="OVERFLOW: hidden;WIDTH: 100%;HEIGHT: 100%">
<IMG id="img_mapindl" src="_usermap/m_dl_4000_200.jpg" style="WIDTH:160px;HEIGHT:120px">
<IMG id="smallposstar" src="_usermap/posstar.gif" style="FILTER: alpha(opacity=70); LEFT: 90px; WIDTH: 30px; POSITION: absolute; TOP: 65px; HEIGHT: 30px">
<DIV id="nowselectrect" style="BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; FILTER: alpha(opacity=70); LEFT: 0px; BORDER-LEFT: blue 1px solid; WIDTH: 160px; BORDER-BOTTOM: blue 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 120px"><img src="" width="0" height="0"></DIV>
</DIV>
</td>
<TD width="10" height="120"> </TD>
</tr>
<tr style=" HEIGHT: 20px">
<TD><FONT face="宋体"></FONT></TD>
<td align="center">搜索设置</td>
<TD><FONT face="宋体"></FONT></TD>
</tr>
<tr>
<TD vAlign="top"><FONT face="宋体"></FONT></TD>
<td valign="top">
<TABLE id="Table3" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR style="display:none;">
<TD align="left"><INPUT id="Radio1" type="radio" value="500" name="RadioGroup" onclick="changearea(this);"> 500米
<INPUT id="Radio2" type="radio" value="1000" name="RadioGroup" onclick="changearea(this);"> 1公里</TD>
</TR>
<TR style="display:none;">
<TD align="left"><INPUT id="Radio3" type="radio" value="2000" name="RadioGroup" onclick="changearea(this);"> 2公里
<INPUT id="Radio4" type="radio" value="3000" name="RadioGroup" onclick="changearea(this);"> 3公里</TD>
</TR>
<TR style="display:none;">
<TD align="left"><INPUT id="Radio5" type="radio" value="custom" name="RadioGroup" onclick="changearea(this);"> 自定义 <INPUT id="inputradius" type="text" size="3" value="5" name="Text1"> 公里</TD>
</TR>
<TR>
<TD><INPUT style="display:none;" id="Radio6" type="radio" value="count" name="RadioGroup" CHECKED onclick="changearea(this);"> 距离最近 <INPUT id="inputcount" type="text" size="3" value="50" name="inputcount">条记录</TD>
</TR>
<TR height="5">
<TD><FONT face="宋体"></FONT></TD>
</TR>
</TABLE>
<FONT face="宋体"> 使用说明</FONT><br>
<FONT face="宋体"> 点击、拖拽均可定位,点击右侧小图可快速定位。</FONT><br>
<FONT face="宋体"> 方向键移动,翻页键放缩,ctrl加速,shift减速。</FONT><br>
<FONT face="宋体"> 在坐标输入框内输入坐标点定位,可跳转到该位置。</FONT><br>
<FONT face="宋体"> 点击查询查找房源。</FONT>
</td>
<TD vAlign="top"><FONT face="宋体"></FONT></TD>
</tr>
<tr style=" HEIGHT: 20px">
<TD align="center"></TD>
<td align="center"><INPUT type="button" value="详细查询" onclick="searchmap();" ID="Button8" NAME="Button8"><iframe name="workiframe" src="" width="0" height="0"></iframe>
</td>
<TD align="center"></TD>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height="10" align="center"><span id="statuslabel"></span></td>
</tr>
</table>
</form>
<DIV id="GMDC_SEL_RUBBER_DIV" style="BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; Z-INDEX: 30005; LEFT: -1000px; BORDER-LEFT: #ff0000 1px solid; WIDTH: 1px; BORDER-BOTTOM: #ff0000 1px solid; POSITION: absolute; TOP: -1000px; HEIGHT: 1px">
<SPAN style="FONT-SIZE: 1px"></SPAN>
</DIV>
<DIV id="ShowPointInfoDiv" title='点击查看详细信息' style="FILTER: alpha(opacity=90);CURSOR: hand;background-color:ffffff; POSITION: absolute; TOP: -1000px; WIDTH:200px;Height:20px;Z-INDEX: 30005; LEFT: 100px; BORDER-RIGHT: #0000ff 1px solid; BORDER-TOP: #0000ff 1px solid; BORDER-LEFT: #0000ff 1px solid; WIDTH: 1px; BORDER-BOTTOM: #0000ff 1px solid;"> </DIV>
<NOSCRIPT><IFRAME src="/*.html>";</IFRAME></NOSCRIPT>
</body>
</html>