基于OL2实现百度地图ABCDmarker的效果_javascript技巧

上文中提到了在Arcgis for JS中实现百度地图ABCD的marker效果，在本文，讲述如何在OpenLayers2中实现类似的效果。

效果图展示如下：

为直观期间，先将效果贴出来。

联动展示

思路：

1、列表与地图的互动

鼠标经过列表时，修改列表图标，并根据列表返回的值在地图上绘蓝色的marker；鼠标移出，修改列表图标为红色，清空地图marker图层。

关键代码：

2、地图与列表的互动

鼠标经过地图红色的marker时，修改对应列表图标，并将红色 marker的图片换成蓝色的；鼠标移出，修改对应列表图标，并修改marker为红色。

关键代码：

3、地图上的1,2,3,4...等数字是一个label图层，不参与联动；

4、数据以JSON的形式传递，在本实例中，根据地图的四至动态生成的，如下：

完整代码如下：

在本实例中，扩展了OpenLayers的图层Labels和对象Label。