Javascript 谷歌地图不起作用

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

我的地图正在打开，缺少了瓷砖。我知道这是因为该选项卡最初是隐藏的，使用

google.maps.event.trigger（map，“resize”）

有各种各样的解决方案，但就我个人而言，我无法让它正常工作

以下是acf代码和我找到的基本AMMENDENTS，但仍然不起作用：

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

---

有人能告诉我我做错了什么吗？非常感谢您提供的任何帮助

您需要在地图渲染后（显示并具有最终大小后）执行fitBounds操作。当前，当贴图被隐藏时会执行此操作，因此它适合于零大小的贴图。请注意，如果单击“提到的位置”选项卡两次，它将渲染平铺，但中心仍位于左上角

---

（显示/隐藏在显示div后，显示1/隐藏1使用您的代码）

首先，转到放置选项卡模板的文件，搜索加载地图选项卡的

标记并将其放入：

<li onclick="reloadmap()">

这样说：

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

---

我也遇到了同样的问题，将dom元素更改为visible后，映射在

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
}

---

您有使用javascript的示例HTML标记吗？或者一把小提琴来演示这个问题？有多少个标记？你可以在这里看到一个例子，在“提到的位置”选项卡下，你对css提示表示感谢-我现在已经更新了，谢谢，我现在已经按照你的建议在渲染完地图后将代码更新为fitBounds，但我还是遇到了同样的问题。我看不出它在过去有什么变化。该版本只执行“中心映射”功能中的fitBounds（除非我缺少某些内容或存在缓存问题），该功能仅在页面加载时运行，而不是在显示选项卡时运行。我已检查，并且实时版本似乎已更新：我更改了它，以便“中心映射”功能在“渲染映射”功能之后运行，虽然我的javascript/jQuery并不像你所说的那么好，所以可能不起作用。问题是render_map函数（以及center_map函数）是在页面加载时运行的，而不是在显示选项卡时。当它们运行时（选项卡隐藏），浏览器会向该div的google maps API报告大小为零，并且地图会显示您看到的行为（中心位于左上角）。请参阅我在答案中添加的概念证明。请不要在多个问题上逐字发布相同的答案。要么将问题标记为重复问题，要么为每个问题专门定制答案。

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
}