Google地图标记突出显示

Question

我有一个在地图上放置标记的scipt,每个标记都有它的唯一ID设置如下:

marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: markerImg,
        id: uniqueid()
    });

将每个标记推送到聚类器后,我运行一个函数,构建一个包含地图上所有标记的侧栏.该侧栏的每个div代表一个标记:

<div id="sidebar">
   <div id="marker1234"></div>
   <div id="marker1235"></div>
   <div id="marker1236"></div>
   ...
</div>

如何创建一个悬停div的功能,突出显示地图上的相应标记？问题是我不知道如何通过其ID来定位单个标记.

我看到了一些像这样的解决方案http://www.geocodezip.com/v3_MW_example_hoverchange.html(在StackOverflow上找到),但它依赖于另一种方法来构建侧边栏...

PS.我想避免在每次悬停标记列表时循环所有标记...

Answer 1

您根本不需要ID来访问标记,在创建标记时填充侧边栏,并将标记存储为HTML元素的属性:

示例代码(当侧边栏中的元素悬停时,标记会反弹):

var i = 0,
    sidebar = document.getElementById('sidebar');

var item    = document.createElement('div');
    item.innerHTML='Marker#'+(++i);
    item.marker=new google.maps.Marker({/*your marker-properties*/});
    item.onmouseover=function(){this.marker.setAnimation(google.maps.Animation.BOUNCE);};
    item.onmouseout=function(){this.marker.setAnimation(null);};
    sidebar.appendChild(item);