谷歌地图调整大小不起作用

Question

我在（最初隐藏的）选项卡中使用 Google 地图，地图是根据 Wordpress 高级自定义字段插件提供的示例代码生成的。

我的地图打开时缺少图块。我知道这是因为该选项卡最初是隐藏的，并且有各种使用 google.maps.event.trigger(map, "resize") 的解决方案，但对于我来说，我无法让它工作。

这是我找到的带有基本修正的 acf 代码，但仍然无法正常工作：

        (function($) {
            var map;
            function render_map( $el ) {
                var $markers = $el.find(".marker");
                var args = {
                    zoom        : 16,
                    center      : new google.maps.LatLng(0, 0),
                    mapTypeId   : google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map( $el[0], args);
                map.markers = [];
                $markers.each(function(){
                    add_marker( $(this), map );
                });
                center_map( map );
            }

            function add_marker( $marker, map ) {
                var latlng = new google.maps.LatLng( $marker.attr("data-lat"), $marker.attr("data-lng") );
                var marker = new google.maps.Marker({
                    position    : latlng,
                    map         : map
                });
                map.markers.push( marker );
                if( $marker.html() )
                {
                    var infowindow = new google.maps.InfoWindow({
                        content     : $marker.html()
                    });
                    google.maps.event.addListener(marker, "click", function() {
                        infowindow.open( map, marker );
                    });
                }
            }

            function center_map( map ) {
                var bounds = new google.maps.LatLngBounds();
                $.each( map.markers, function( i, marker ){
                    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
                    bounds.extend( latlng );
                });

                if( map.markers.length == 1 )
                {
                    map.setCenter( bounds.getCenter() );
                    map.setZoom( 16 );
                }
                else
                {
                    map.fitBounds( bounds );
                }

            }
            $(document).ready(function(){
                $(".acf-map").each(function(){
                    render_map( $(this) );
                });
            });
            $(document).on("click", "#map-tab", function() {
                alert("clicked");
                google.maps.event.trigger(map, "resize");
                map.setCenter( bounds.getCenter() );
                map.setZoom( 16 );
            });
        })(jQuery);

谁能建议我做错了什么？非常感谢任何帮助

Answer 1

您需要在地图被渲染后进行 fitBounds 操作（在它显示并具有最终大小之后）。目前它是在地图隐藏时完成的，因此它适合零大小的地图。请注意，如果您单击“提及的位置”选项卡两次，它会呈现图块，但中心仍位于左上角。

proof of concept example（在显示 div 后 Show/Hide 会 fitBounds，Show 1/Hide 1 使用您的代码）

Answer 2

首先，转到放置标签模板的文件，搜索加载地图标签的<li>标签并将其放入：

<li onclick="reloadmap()">

在地图脚本之后

google.maps.event.addDomListener(window, 'load', initialize);

这样写：

function reloadmap(){
  //when you resize the map, you lose your zoom and your center
  //so you need to get them again here
    z = map.getZoom();
    c = map.getCenter();
    google.maps.event.trigger(map, 'resize');
  //and set them again here
    map.setZoom(z);
    map.setCenter(c);
}

Answer 3

我遇到了同样的问题，在将 dom 元素更改为可见之后，resize 之后地图不可见。原因是隐藏元素的宽度为零。因此地图被初始化为一个零大小的地图。

在我的情况下，在调用 resize 之前更改地图的大小解决了这个问题。

注意：要在初始化后稍后检索地图，您可以将其保存在 jquery 数据对象中，如下所示：

var $map = $('#id-of-the-map');  // get the jquery dom element of the map
var mapInstance = new google.maps.Map($map[0], {... some google maps options ...});
$map.data('mapInstance', mapInstance);

然后在调整大小之前更改 dom 元素的尺寸：

var $map = $('#id-of-the-map');  // get the jquery dom element of the map
if ($map.is(':visible')) {   // if it became visible
    $map.height($map.width() / 1.6);  // resize the dom element
    var mapInstance = $map.data('mapInstance'); // get the google maps map instance
    google.maps.event.trigger(mapInstance, "resize");   // resize the map
}