在同一页面上加载相同的 ACF 地图两次

Question

我正在一个网站上工作：MetroCRE 并且正在尝试使用 Google 地图与高级自定义字段的集成。

地图现在可以使用了，但是由于特定的客户需求，他们希望它在移动设备上位于一个位置，并且在桌面上存在的选项卡选择中。

但是，无法在同一页面上两次加载 Google 地图字段。

在移动设备上，地图可以工作，或者调整浏览器的大小都可以加载，但在页面加载时不会 >= 768px

有谁知道有什么方法可以克服这个问题吗？

Answer 1

由于地图在调整大小后开始工作...

来自 ACF Website.

解决隐藏地图问题

如果在隐藏元素上初始化，Google 映射 API 将无法按预期工作。当元素显示时，地图将不会显示。使用弹出模式时最有可能出现这种情况。

要解决此问题，只需在地图元素可见后触发地图变量上的“resize”事件即可。

// popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');

所以我会在您单击选项卡地图时添加一个事件来触发调整大小。把代码放到acf_google-map.js最后

$(document).ready(function(){

    $('.acf-map').each(function(){

        // create map
        map = new_map( $(this) );

    });

    $('#map-tab').click(function () {
        google.maps.event.trigger(map, 'resize');
    });

});

编辑：

因为标签淡入有动画所以延迟调整大小触发器

$('#map-tab').click(function () {
    setTimeout(function() {
        google.maps.event.trigger(map, 'resize');
    }, 200);
});

Answer 2

虽然这不是解决问题的最佳方法，但我找到了解决问题的方法 here。

事实证明添加一些 CSS 来呈现两个选项卡，但将它们从页面上移开会导致它工作，因为 google.maps.event.trigger(map, 'resize'); 不会在选项卡激活时工作。

下面是 CSS 我用来让它工作的。适用于响应式。

.tab-pane { display: block !important; position: fixed; right: -9999px; width: 100%; }
.tab-pane.active { position: relative; left: 0; }

如果有人有非 CSS 的解决方案，请告诉我，因为 TheDrot 的上述回答对我不起作用。

在同一页面上加载相同的 ACF 地图两次

Load Same ACF Map Twice on Same Page

php

wordpress

google-maps

advanced-custom-fields