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

Question

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

我的 map 打开时缺少图 block 。我知道这是因为该选项卡最初是隐藏的，并且有各种使用 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

您需要在渲染 map 之后执行 fitBounds 操作(在显示并具有最终尺寸之后)。目前它是在 map 隐藏时完成的，因此它适合零尺寸 map 。请注意，如果您单击“提到的位置”选项卡两次，它会呈现图 block ，但中心仍位于左上角。

proof of concept example (显示/隐藏在显示 div 后执行 fitBounds，显示 1/隐藏 1 使用您的代码)