Google maps api 3 谷歌地图标记突出显示

我有一个在地图上放置标记的scipt，每个标记都有其唯一的ID设置，如下所示：

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

将每个标记推到clusterer后，我运行一个函数，该函数构建一个包含地图上所有标记的侧栏。该侧边栏的每个div代表一个标记：

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

...

如何创建一个函数，使其在悬停div时高亮显示地图上的相应标记？ 问题是我不知道如何通过ID来定位单个标记

我看到了一些类似这样的解决方案（在StackOverflow上找到），但它依赖于另一种方法来构建边栏

---

另外，我希望避免每次悬停标记列表时循环所有标记…

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

示例代码（当侧边栏中的元素悬停时使标记反弹）：

---

访问标记、创建标记时填充侧栏以及将标记存储为HTML元素的属性时，您根本不需要ID：

示例代码（当侧边栏中的元素悬停时使标记反弹）：

---

我发现最好的方法是将每个标记的实例保存在一个数组中。因此，在服务器端脚本中有一个标记数据数组，用于创建JavaScript和侧栏菜单。创建一个JavaScript数组来保存所有Google地图标记对象。因此，如果所有操作都正确，索引将匹配相同的。因此，可以使用相同的标记索引引用JavaScript数组中的标记对象

PHP

$markers=新数组（）；
$markers[0]=数组（'lat'=>'-30.00000'，'lon'=>120.00000'，title'=>'Maker 0'）；
$markers[1]=数组（'lat'=>'-31.00000'，'lon'=>121.00000'，title'=>'Maker 1'）；
$markers[2]=数组（'lat'=>'-32.00000'，'lon'=>122.00000'，title'=>'Maker 2'）；
//编写JS
回声'；
/*
这里有一堆谷歌地图代码
*/
//开始添加标记
echo'var gm_markers=新数组（）；
';
foreach（$marker as&k=>$m）{
echo'gm_markers['.$k.]=新的google.maps.Marker({
/*制造商选项在这里*/
});
}
回声'；

现在您有了一个JavaScript标记数组，它的数组索引与PHP标记数组相匹配。那么参考就容易了

//loop again for the list
echo '<div id="sidebar">';
foreach($marker as $k=>$m){
    echo '<div id="marker_'.$k.'" onmouseover="gm_markers['.$k.'].setAnimation(google.maps.Animation.BOUNCE);">'.$k.'</div>';
}
echo '</div>';

//为列表再次循环
回声'；
foreach（$k=>m）{
回音“.$k.”；
}
回声'；

有道理吗？

---

因此，您可以使用数组中的索引来访问JavaScript中的生成器。我总是使用这种方法。

我发现最好的方法是将每个标记的实例保存在一个数组中。因此，在服务器端脚本中有一个标记数据数组，用于创建JavaScript和侧栏菜单。创建一个JavaScript数组来保存所有Google地图标记对象。因此，如果所有操作都正确，索引将匹配相同的。因此，可以使用相同的标记索引引用JavaScript数组中的标记对象

PHP

$markers=新数组（）；
$markers[0]=数组（'lat'=>'-30.00000'，'lon'=>120.00000'，title'=>'Maker 0'）；
$markers[1]=数组（'lat'=>'-31.00000'，'lon'=>121.00000'，title'=>'Maker 1'）；
$markers[2]=数组（'lat'=>'-32.00000'，'lon'=>122.00000'，title'=>'Maker 2'）；
//编写JS
回声'；
/*
这里有一堆谷歌地图代码
*/
//开始添加标记
echo'var gm_markers=新数组（）；
';
foreach（$marker as&k=>$m）{
echo'gm_markers['.$k.]=新的google.maps.Marker({
/*制造商选项在这里*/
});
}
回声'；

现在您有了一个JavaScript标记数组，它的数组索引与PHP标记数组相匹配。那么参考就容易了

//loop again for the list
echo '<div id="sidebar">';
foreach($marker as $k=>$m){
    echo '<div id="marker_'.$k.'" onmouseover="gm_markers['.$k.'].setAnimation(google.maps.Animation.BOUNCE);">'.$k.'</div>';
}
echo '</div>';

//为列表再次循环
回声'；
foreach（$k=>m）{
回音“.$k.”；
}
回声'；

有道理吗？

---

因此，您可以使用数组中的索引来访问JavaScript中的生成器。我总是使用这种方法。

我在您提到的URL（）中找到了这个漂亮而简单的解决方案

• 将鼠标事件添加到将触发高亮显示的html元素 示例：添加到表中：

…

提示：

• 变量标记、图像url和图像url悬停应该是全局javascript变量

---

我在您提到的URL中找到了这个漂亮而简单的解决方案（）

• 将鼠标事件添加到将触发高亮显示的html元素 示例：添加到表中：

…

提示：

• 变量标记、图像url和图像url悬停应该是全局javascript变量

---

我感谢您的评论，但在现阶段，更改创建标记列表的函数不是一个选项。我真的需要通过ID来选择一个标记，而不必循环每个标记。我感谢您的评论，但在这个阶段，更改创建标记列表的函数不是一个选项。我真的需要通过ID选择一个标记，而不需要循环每个标记。

//loop again for the list
echo '<div id="sidebar">';
foreach($marker as $k=>$m){
    echo '<div id="marker_'.$k.'" onmouseover="gm_markers['.$k.'].setAnimation(google.maps.Animation.BOUNCE);">'.$k.'</div>';
}
echo '</div>';