如何使标记在将鼠标悬停在外部 div 上时反弹?

Question

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

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

我尝试了许多建议，但到目前为止都没有奏效。根据我的研究，看起来也许我需要为每个单独的 Google 地图标记分配一个 ID，以便我可以在鼠标悬停div 时调用反弹。

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

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

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

为了得到我的标记，我构建了一个位置数组(标题/等、纬度、经度和 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] 中的值)正在传递，因为鼠标悬停不起作用。

实际上，我什至不确定这种方法是否最好。真的，我的基本挑战是：我在左侧有 X 属性 (div)(由于它是数据驱动的，它将始终在变化)，我希望能够在右侧反弹该div 的地图标记。我对任何类型的建议都持开放态度 - 对上述建议的修复，可能有帮助的链接或完全不同的方法。

Answer 1

我已经检查了您的网站控制台日志显示错误消息"未捕获的引用错误：未定义标记">

检查了您的代码，您已定义，这意味着鼠标悬停不起作用。

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/