Google 映射 + 锚定 scrolltop 到 div

Question

我正在尝试在 google 地图标记上制作悬停或单击事件，向下滚动可滚动 div。我已经走了这么远：

可以看到卷轴明显偏了。我似乎无法理解为什么会这样。我已经尝试将滚动应用到 body 而不是修复整个问题，但它并没有解决问题。 Wordpress 插件 Advanced Custom Fields 用于轻松添加位置，因此添加 ID 等有点困难，因为它 php 循环标记，除非它带有 $i++ 计数器。

这些是我的脚本：

我在 Google 地图中添加的代码 api:

google.maps.event.addListener(marker, 'mouseover', function() {
liTag=$(".locations-item").find("[data-lat='" + $marker.attr('data-lat') + "']");
marker.setIcon(icon2);
this.setOptions({zIndex:10});
$(liTag).addClass('active');
$(".locations-item a").addClass('fade');
$('.gmap-scroll').animate({
         scrollTop: $(liTag).offset().top
 } );
});


google.maps.event.addListener(marker, 'mouseout', function() {
liTag=$(".locations-item").find("[data-lat='" + $marker.attr('data-lat') + "']");
marker.setIcon(icon1);
  this.setOptions({zIndex:1});
$(liTag).removeClass('active');
$(".locations-item a").removeClass('fade');
});

每个 Item 都有一个带有 lat 和 lng 属性的 A，在 google JS 中，它有一个 .find（参见 liTag）。它正确地找到了每个独特的标记，因为它突出显示了 divs 并且标记很好。

<div class="locations-item text-center">
<a data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
[IMAGE OF LOCATION]
</a>
</div>

非常感谢您的帮助！

Answer 1

你的 .gmaps div 有 position:fixed 这就是为什么浏览器认为 .row div 包含 .gmaps div 高度为0，因此它认为滚动是不必要的。

要解决此问题，请制作 .gmaps div position:static 或 position:relative 并调整它的其他 css 属性，或者分配一些 height 到 .row 包含 .gmaps div.

因此，例如，将此 CSS 用于 .gmaps 而不是您拥有的那个：

position: relative;
height: 400px;
width: 100%;

Google 映射 + 锚定 scrolltop 到 div

Google maps + anchor scrolltop to div

jquery

google-maps

hover

scrolltop

advanced-custom-fields