Question

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

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

我尝试了许多建议，但到目前为止都没有奏效。根据我的研究，似乎我需要为每个Google Maps 标记分配一个ID，以便随后可以在将div悬停在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（即locations [i] [3]中的值）没有保留，因为onmouseover无效。

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

Answer 1

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

检查您已定义的代码，这意味着onmouseover不起作用。

SQL

您应该进行这些更改

1：HTML代码。

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

更改为

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

2：Javascript代码。

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

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

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

1 个答案: