摘要：
很多×××网、旅游酒店网上，都有一个列表，鼠标经过列表上的数据时，地图上就会打开相应的信息窗口。
如何实现这一功能呢？
快来学习吧。
-----------------------------------------------------------------------------------------------
一、制作列表
接着上一篇文章来讲，我们已经拥有了一张能显示自定义标注，和信息窗口的地图了。现在，我们来加上列表。
首先，需要写上一段htm，来展示列表。
<div style="float:left;width:200px;height:340px;border:1px solid gray;border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8em;"> <ul> <li><span style="float:right;">120元</span><a href="#">如家快捷酒店</a></li> <li><span style="float:right;">2370元</span><a href="#">昆仑大厦</a></li> <li><span style="float:right;">50元</span><a href="#">华夏银行</a></li> <li><span style="float:right;">16元</span><a href="#">成都小吃</a></li> <li><span style="float:right;">300元</span><a href="#">锦绣大饭店</a></li> <li><span style="float:right;">180元</span><a href="#">七天快捷酒店</a></li> <li><span style="float:right;">9元</span><a href="#">中央民族大学</a></li> <li><span style="float:right;">3300元</span><a href="#">昌平汽车专修学院</a></li> <li><span style="float:right;">20元</span><a href="#">百度大厦</a></li> <li><span style="float:right;">1000元</span><a href="#">海尔电器销售点</a></li> </ul> </div>
对了，不要忘记给列表中的链接加上样式。
二、打开对应的信息窗口
因为这里没有用到对应的marker，不能用上一篇文章中的打开信息窗口的方法了。
我们需要在地图上打开信息窗口。
需要两个参数，第一是信息窗口的id，第二是信息窗口的坐标。如下：
function openMyWin(id,p){
map.openInfoWindow(id,p);
}
最后，只需要对列表中的数据，加上打开对应信息窗口的js语句即可。
如下，当鼠标滑过时，打开信息一的窗口。
onmouseover="openMyWin(infoWindow1,point[1])"
三、截图
四、源代码
为了方便大家学习，以下代码包含了上一章的全部代码，并做了改进。
全部源代码如下：
View Code
