Mikel
[转载]如何利用【百度地图API】，制作房产酒店地图？（下） – 酸奶小妹 – 博客园.
摘要：
很多房产网、旅游酒店网上，都有一个列表，鼠标经过列表上的数据时，地图上就会打开相应的信息窗口。
如何实现这一功能呢？
快来学习吧。
———————————————————————————————–
一、制作列表
接着上一篇文章来讲，我们已经拥有了一张能显示自定义标注，和信息窗口的地图了。现在，我们来加上列表。
首先，需要写上一段htm，来展示列表。
<span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> left</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">340px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0pt</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">0pt</span><span class="pln"> </span><span class="lit">0pt</span><span class="pun">;</span><span class="pln"> line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.8em</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln"></span><span class="tag"><ul></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">120元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">如家快捷酒店</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">2370元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">昆仑大厦</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">50元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">华夏银行</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">16元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">成都小吃</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">300元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">锦绣大饭店</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">180元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">七天快捷酒店</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">9元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">中央民族大学</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">3300元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">昌平汽车专修学院</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">20元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">百度大厦</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><span</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">1000元</span><span class="tag"></span><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">海尔电器销售点</span><span class="tag"></a></li></span><span class="pln"></span><span class="tag"></ul></span><span class="pln"></span><span class="tag"></div></span> |
对了，不要忘记给列表中的链接加上样式。
二、打开对应的信息窗口
因为这里没有用到对应的marker，不能用上一篇文章中的打开信息窗口的方法了。
我们需要在地图上打开信息窗口。
需要两个参数，第一是信息窗口的id，第二是信息窗口的坐标。如下：
<span class="kwd">function</span><span class="pln"> openMyWin</span><span class="pun">(</span><span class="pln">id</span><span class="pun">,</span><span class="pln">p</span><span class="pun">){</span><span class="pln">map</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">id</span><span class="pun">,</span><span class="pln">p</span><span class="pun">);</span><span class="pln"></span><span class="pun">}</span> |
最后，只需要对列表中的数据，加上打开对应信息窗口的js语句即可。
如下，当鼠标滑过时，打开信息一的窗口。
onmouSEOver=”openMyWin(infoWindow1,point[1])”
三、截图
四、源代码
为了方便大家学习，以下代码包含了上一章的全部代码，并做了改进。
全部源代码如下：
<span class="pln"></span><span class="pun">酷讯酒店地图</span><span class="pln"></span><span class="pun"><</span><span class="pln">script src</span><span class="pun">=</span><span class="str">"http://api.map.baidu.com/api?v=1.2"</span><span class="pln"> type</span><span class="pun">=</span><span class="str">"text/javascript"</span><span class="pun">></</span><span class="pln">script</span><span class="pun">></span><span class="pln"> </span><span class="pun"><!--</span><span class="pln"> a</span><span class="pun">{</span><span class="pln">text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln">color</span><span class="pun">:</span><span class="com">#6ce;font-size:14px;} a:hover{text-decoration:underline;} --></span><span class="pln"></span><span class="pun"><</span><span class="pln">div style</span><span class="pun">=</span><span class="str">"float: left; width: 200px; height: 340px; padding: 0pt 10px 0pt 0pt; line-height: 1.8em;"</span><span class="pun">></span><span class="pln"></span><span class="str"><ul></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">120</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow1,point[1])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>如家快捷酒店</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">2370</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow2,point[2])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>昆仑大厦</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">50</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow3,point[3])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>华夏银行</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">16</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow4,point[4])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>成都小吃</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">300</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow5,point[5])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>锦绣大饭店</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">180</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow6,point[6])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>七天快捷酒店</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">9</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow7,point[7])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>中央民族大学</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">3300</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow8,point[8])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>昌平汽车专修学院</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">20</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow9,point[9])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>百度大厦</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"> </span><span class="str"><li></span><span class="pun"><</span><span class="pln">span style</span><span class="pun">=</span><span class="str">"float: right;"</span><span class="pun">></span><span class="lit">1000</span><span class="pun">元</</span><span class="pln">span</span><span class="pun">><</span><span class="pln">a onmouseover</span><span class="pun">=</span><span class="str">"openMyWin(infoWindow0,point[0])"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">>海尔电器销售点</</span><span class="pln">a</span><span class="pun">></</span><span class="pln">li</span><span class="pun">></span><span class="pln"></span><span class="pun"><</span><span class="str">/ul></</span><span class="pln">div</span><span class="pun">></span><span class="pln"></span><span class="pun"><</span><span class="pln">script type</span><span class="pun">=</span><span class="str">"text/javascript"</span><span class="pun">></span><span class="com">// <![CDATA[</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> map </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Map</span><span class="pun">(</span><span class="str">"container"</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> point </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Point</span><span class="pun">(</span><span class="lit">116.404</span><span class="pun">,</span><span class="pln"> </span><span class="lit">39.915</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">centerAndZoom</span><span class="pun">(</span><span class="pln">point</span><span class="pun">,</span><span class="pln"> </span><span class="lit">14</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> myIcon </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Icon</span><span class="pun">(</span><span class="str">"http://dev.baidu.com/wiki/static/map/API/examples/images/Mario.png"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">32</span><span class="pun">,</span><span class="pln"> </span><span class="lit">70</span><span class="pun">),</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">//小车图片</span><span class="pln"> imageOffset</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="com">//图片的偏移量。为了是图片底部中心对准坐标点。</span><span class="pln"> </span><span class="pun">});</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> point </span><span class="pun">=</span><span class="pln"> </span><span class="pun">&</span><span class="com">#91;new BMap.Point(116.411776,39.942833),new BMap.Point(116.320791,40.003682),new BMap.Point(116.275186,39.896095),new BMap.Point(116.425098,39.946249),new BMap.Point(116.359823,39.984761),new BMap.Point(116.316479,39.98323),new BMap.Point(116.385986,39.946124),new BMap.Point(116.427545,40.00796),new BMap.Point(116.446965,39.911603),new BMap.Point(116.454579,39.946652)]; //10个坐标点</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker1 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;1],{icon:myIcon}); // 创建10个标注</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker2 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;2],{icon:myIcon});</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker3 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;3],{icon:myIcon});</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker4 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;4],{icon:myIcon});</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker5 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;5],{icon:myIcon});</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker6 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;6],{icon:myIcon});</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker7 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;7],{icon:myIcon});</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker8 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;8],{icon:myIcon});</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker9 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;9],{icon:myIcon});</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> marker0 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">(</span><span class="pln">point</span><span class="pun">&</span><span class="com">#91;0],{icon:myIcon});</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker1</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 将标注添加到地图中</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker2</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker3</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker4</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker5</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker6</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker7</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker8</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker9</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">addOverlay</span><span class="pun">(</span><span class="pln">marker0</span><span class="pun">);</span><span class="pln">map</span><span class="pun">.</span><span class="pln">setViewport</span><span class="pun">(</span><span class="pln">point</span><span class="pun">);</span><span class="pln"> </span><span class="com">//调整地图的最佳视野为显示标注数组point</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts1 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">如家快捷酒店</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts2 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">昆仑大厦</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts3 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">华夏银行</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts4 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">成都小吃</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts5 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">锦绣大饭店</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts6 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">七天快捷酒店</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts7 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">中央民族大学</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts8 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">昌平汽车专修学院</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts9 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">百度大厦</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> opts0 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">offset </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">Size</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">25</span><span class="pun">),</span><span class="pln"> title </span><span class="pun">:</span><span class="pln"> </span><span class="str">'<span style="font-size:14px;color:#0A8021">海尔电器销售点</span>'</span><span class="pun">};</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow1 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts1</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 创建信息窗口对象，引号里可以书写任意的html语句。</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow2 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts2</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow3 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts3</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow4 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts4</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow5 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts5</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow6 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市大钟寺沧澜大厦</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts6</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow7 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts7</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow8 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市哇哈哈路鲜鱼一条街</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts8</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow9 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts9</span><span class="pun">);</span><span class="pln"></span><span class="kwd">var</span><span class="pln"> infoWindow0 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BMap</span><span class="pun">.</span><span class="typ">InfoWindow</span><span class="pun">(</span><span class="str">"<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"</span><span class="pun">,</span><span class="pln"> opts0</span><span class="pun">);</span><span class="pln">marker1</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow1</span><span class="pun">);});</span><span class="pln">marker2</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow2</span><span class="pun">);});</span><span class="pln">marker3</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow3</span><span class="pun">);});</span><span class="pln">marker4</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow4</span><span class="pun">);});</span><span class="pln">marker5</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow5</span><span class="pun">);});</span><span class="pln">marker6</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow6</span><span class="pun">);});</span><span class="pln">marker7</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow7</span><span class="pun">);});</span><span class="pln">marker8</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow8</span><span class="pun">);});</span><span class="pln">marker9</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow9</span><span class="pun">);});</span><span class="pln">marker0</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">infoWindow0</span><span class="pun">);});</span><span class="pln"></span><span class="kwd">function</span><span class="pln"> openMyWin</span><span class="pun">(</span><span class="pln">id</span><span class="pun">,</span><span class="pln">p</span><span class="pun">){</span><span class="pln"> map</span><span class="pun">.</span><span class="pln">openInfoWindow</span><span class="pun">(</span><span class="pln">id</span><span class="pun">,</span><span class="pln">p</span><span class="pun">);</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="com">// ]]></script></span> |
