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

Question

我在<details>-tag 中实现 Google Maps JavaScript API V3 时遇到问题。我initialize();在单击<summary>-tag 时运行。地图第一次正确显示，但如果我关闭<details>-tag 并再次打开它，它不会正确显示。

问题

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

再次打开地图后尝试触发调整大小事件。

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

从文档

当 div 更改大小时，开发人员应在地图上触发此事件： google.maps.event.trigger(map, 'resize') 。