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

Question

我正在尝试创建一个页面，在左侧列出出租物业，并通过 Google Maps API 将它们映射到右侧。到目前为止，我在左侧拥有所有属性（现在都是虚拟数据，但它是动态生成的），然后在右侧 Google Maps 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] 中的值）没有通过，因为 onmouseover 不起作用。

实际上，我什至不确定这种方法是否最好。真的，我的基本挑战是：我在左侧有 X 属性（div）（由于它是数据驱动的，所以总是会发生变化），并且我希望能够在右侧反弹该 div 的地图标记。我愿意接受任何类型的建议 - 建议的上述修复方法、可能有帮助的链接或完全不同的方法。

Answer 1

我已检查您的网站控制台日志显示错误消息“未捕获的 ReferenceError：未定义标记”

检查了你的代码，你已经定义了，这意味着 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/