1

我有一个在地图上放置标记的 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。我想避免每次悬停标记列表时循环所有标记...

4

3 回答 3

6

您根本不需要 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);
于 2013-09-14T03:44:13.463 回答
1

我发现的最好方法是将每个标记的实例保存在一个数组中。因此，您的服务器端脚本中有一组标记数据，可用于创建 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 中的制造商。我总是使用这种方法。

于 2013-11-07T15:49:29.737 回答
0

我在您提到的 URL ( 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>

提示：

  • 变量标记，image_url 和 image_url_hover 应该是全局 javascript 变量。
于 2013-11-23T15:14:20.450 回答