如何使标记在鼠标悬停在外部 div 时反弹？

Question

我正在尝试制作一个页面，在左侧列出待出租的房产，它们通过 Google 地图 API 映射在右侧。到目前为止，我在左侧拥有所有属性（现在所有虚拟数据，但它是动态生成的），然后在右侧 Google Maps APi 绘制出所有数据（也动态）。示例页面有 20 个左右的标记。我现在要做的是：每当有人将鼠标悬停在左侧的属性上时，我想在地图上弹跳标记，以便人们知道打开哪个。

我的开发页面位于：https://www.commercialrealestate-portland.com/available-now/

我已经尝试了一些建议，none 目前为止，其中的一些建议有效。根据我的研究，看起来我可能需要为每个 individual Google Maps marker 分配一个 ID，这样我就可以调用 bounce鼠标悬停在 div.

上

我想我应该在左边的每个 div 中放这样的东西：

<div class="listingBox" onmouseover="marker['unit145_the_waterman_building'].setAnimation(google.maps.Animation.BOUNCE);"></div>

但我不确定这是否可行。当我转到我的控制台时，我收到未捕获的引用错误 -- 未定义标记。

为了获得我的标记，我构建了一个位置数组（title/etc、纬度、经度和 ID）。然后，我遍历这些位置并执行：

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map,
      id: locations[i][3]
    })

但是，我不认为 ID（位置 [i][3] 中的值）有效，因为 onmouseover 不起作用。

实际上，我什至不确定这种方法是否最好。真的，我的基本挑战是：我在左边有 X 属性（divs）（由于它是数据驱动的，所以总是会改变），我希望能够反弹 div's右边的地图标记。我乐于接受任何类型的建议——对上述问题的建议修复、可能有帮助的链接或完全不同的方法。

Answer 1

我检查了你的网站控制台日志显示错误信息"Uncaught ReferenceError: marker is not defined"

检查了你的代码，你已经定义了，这意味着 onmouseover 没有工作。

marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map,
      id: gmid
});

您应该进行这些更改

1: HTML代码.

<div class="listingBox" onmouseover="marker['unit189_ankeny_building'].setAnimation(google.maps.Animation.BOUNCE);">

改为

<div class="listingBox" id="unit189_ankeny_building">

2: Javascript代码.

var gmid = locations[i];

var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map,
      id: _mid[3]
});
(function(_mid, _marker){
$('#' + _mid[3]).on('mouseover', function){
      _marker.setAnimation(google.maps.Animation.BOUNCE);
});
})(gmid, marker);

更新 1 请参阅我的示例：https://jsfiddle.net/a5s07frj/

如何使标记在鼠标悬停在外部 div 时反弹？

How can I make a marker bounce on mouseover of an outside div?

javascript

google-maps

google-maps-markers