javascript - -标签中的 Google Maps JavaScript API V3 存在问题

Question

我在 <details> 中实现 Google Maps JavaScript API V3 时遇到问题-标签。我跑initialize();当点击<summary>时-标签。第一次 map 显示正确，但如果我关闭 <details> -标记并再次打开它，它无法正确显示。

问题

HTML

<details id="address">

    <summary onclick="initialize();">My map</summary>

    <div id="maps" class="box box_addon">

        <div id="map_canvas1"></div>
        <div id="map_canvas2"></div>

    </div>

</details>

Javascript

function initialize() {

    var isOpen = ($('#address').attr('open') == 'open');

    if(!isOpen){

        var centerPosition = new google.maps.LatLng(<?php echo $coords['lat']; ?>, <?php echo $coords['lng']; ?>);

        var mapOptions;
        var map;
        var marker;

        // Karta 1

        mapOptions = {
            zoom: 9,
            center: centerPosition,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            streetViewControl: false,
            mapTypeControl: false

        };

        map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);

        marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: centerPosition
        });

        // Karta 2

        mapOptions = {
            zoom: 17,
            center: centerPosition,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            scrollwheel: false,
            streetViewControl: false,
            mapTypeControl: false
        };

        map = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);

        marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: centerPosition
        });

    }

}

Answer 1

尝试在再次打开 map 后触发 map 的调整大小事件。

google.maps.event.trigger(map, 'resize');

来自文档

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .