<input type="text" id="jdmc" class="input" value="故宫">&nbsp;

<button class="btnClass"

onclick="queryJd(document.getElementById('jdmc').value);"

style="width:50px">查询</button>&nbsp;

<b>经度</b><input type="text" id="lng" size="10" class="input"/>

<b>纬度</b><input type="text" id="lat" size="10" class="input"/>&nbsp;

<button class="btnClass" onclick="selfSetLatLng();"

style="width:30px">GO</button><br/><br/>

<div id="mydiv"><select id="xsfs" size="1"

onchange="selfSetMapType();" class="select">

<option value="0" selected>经典模式</option>

<option value="1" >卫星图象</option>

<option value="2" >混合模式</option>

</select></div>

<button class="btnClass" onclick="map.zoomOut();">

-缩小</button>&nbsp;

<button class="btnClass" onclick="map.zoomIn();">

+放大</button>                   

</div></td></tr></table></td>

<td valign="top">

<table width="100%" border="0" cellspacing="1"

cellpadding="0">

<tr><td><div id="ListDiv"><fieldset class="fs">

<legend>&nbsp;您的浏览历史</legend>

<a id="jdHistoryBao" style="align:center">

<select size="23" id="jdHistory"

onchange="jdlbChange(this.value)">

<option value="故宫">故宫</option>               </select></a>

</fieldset></div></td></tr>

<tr><td><div id="slideShowBao">

<div ID="slideShow">

正在加载...

</div>

</div></td></tr>

</table></td></tr></table>   

</body>

</html>

其中ID为“MapDiv”的div用来显示地图，ID为“slideShow”的div用来显示景点图片幻灯片，ID为“jdHistory” 的div用来显示景点浏览历史。

另外要注意的是，各个按钮及列表框事件需要触发的方法也已经写到了代码框架中，只要后面各个方法开发完成程序就可以正常工作了。

完成了界面框架的搭建后，需要开发一些CSS代码来控制各个控件的显示外观，使界面更有吸引力。在上述代码的“head”部分“title”下添加如下CSS代码：

<style>

img{border:0px;}

fieldset{ width:190px; border:1px solid #f9a923;

background:url(img/btop.gif) no-repeat left top;}

legend{ color:white; font-family:隶书; font-size:16;}

.input{border:1px solid #ffa200;}

.btnClass {BORDER: #ffa200 1px solid;

   PADDING-RIGHT: 2px; PADDING-LEFT: 2px;

   CURSOR: hand; COLOR: black; PADDING-TOP: 2px;}

#ControlDiv{ padding-left:5px;padding-top:5px;

margin-top:2px; background:#fde9b1; height:80px;}

#MapDivBao{ width=600px; height:450;

    float:left; position:relative; border:3px solid #65b4f6;}

#ListDiv{margin-left:2px; padding:2 0 0 0;height:410px;       background:url(img/bbottom.gif) no-repeat left bottom;}

#jdHistory{width:193px; border:1px solid #000;

    background:pink;}

#slideShowBao{ border:2px solid #fff; margin-top:2px;

   margin-left:2px; height:130px; background:black;

  width : 190px;}

#slideShow {width : 160px; height : 120px;

padding-left : 10px; background:black;}

#jdmc{width:125px;}

#lng{width:85px;}

#lat{width:85px;}

#mydiv { border:1px solid #ffa200;float: left;}