Question

我试图在Google地图标记上进行悬停或点击事件向下滚动可滚动的div。我到目前为止：

你可以看到滚动显然是关闭的。我似乎无法弄清楚为什么会这样。我已经尝试将卷轴应用到主体而不是整个固定，但它不能解决问题。 Wordpress插件高级自定义字段用于轻松添加位置，因此添加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）。它可以正确找到每个独特的标记，因为它可以很好地突出显示div和标记。

<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的{{1}} {1}} div。

因此，例如，使用此.gmaps的CSS而不是您拥有的CSS：

.gmaps

谷歌地图+锚点滚动顶部到div

1 个答案: