如何利用【百度地图API】，制作房产酒店地图？

摘要：很多房产网、旅游酒店网上，都有一个列表，鼠标经过列表上的数据时，地图上就会打开相应的信息窗口。如何实现这一功能呢？快来学习吧。-----------------------------------------------------------------------------------------------一、制作列表接着上一篇文章来讲，我们已经拥有了一张能显示自定义标注，和信息窗口的地图了。现在，我们来加上列表。首先，需要写上一段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