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);

Answer 2

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

PHP

$markers = new array( );
$markers[0] = array('lat'=>'-30.00000', 'lon'=>120.00000, 'title'=>'Maker 0');
$markers[1] = array('lat'=>'-31.00000', 'lon'=>121.00000, 'title'=>'Maker 1');
$markers[2] = array('lat'=>'-32.00000', 'lon'=>122.00000, 'title'=>'Maker 2');

//write the JS
echo '<script>';
/*
   bunch of google map code here
 */

 //start to add in markers
 echo 'var gm_markers = new Array( );
 ';
foreach($marker as &k=>$m){
  echo ' gm_markers['.$k.'] = new google.maps.Marker({
                  /* maker options here */
              });
}
echo '</script>';

所以现在你有一个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>';

有意义吗？因此，您可以使用数组的索引来访问JavaScript中的制造商。我总是使用这种方法。

Answer 3

我在您提到的网址（http://www.geocodezip.com/v3_MW_example_hoverchange.html）

中找到了这个非常简单的解决方案

将鼠标事件添加到将触发突出显示的html元素示例：在表格中添加：

<table onmouseover="markers[ID].setIcon(image_hover_url)" onmouseout="markers[ID].setIcon(image_url)">...</table>

提示：

vars markers，image_url和image_url_hover应该是全局javascript vars。

Google地图标记突出显示

3 个答案: