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

因此，当您单击选项卡Map以触发调整大小时，我会添加一个事件。将代码放在最后的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地图两次

2 个答案: