Question

在模态对话框窗口中，谷歌地图未正确加载当我按 F12 时正在加载时间图我的模态对话框将在onclick标签上调用，之后只会加载我的模态对话框窗口。

我的HTML模式

<div class="modal fade" id="modalShowMap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Select Location</h4>
        </div>
        <div class="modal-body">
            <div id="dvMap" style="width: 570px; height: 500px">
            </div>
        </div>
        <div class="modal-footer">

        </div>
    </div>
</div>

我的jQuery代码

 $(document).ready(function () {
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(18.9300, 72.8200),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var latlngbounds = new google.maps.LatLngBounds();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

        google.maps.event.addListener(map, 'click', function (e) {
            var answer = confirm("Are you sure?")
            if (answer) {

                $('#Lat').val(e.latLng.lat());
                $('#Longitude').val(e.latLng.lng());
                $('#modalShowMap').modal("toggle");
            }
        });
        google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
            google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
                google.maps.event.trigger(map, 'resize');
            });
        });
    }

});

Answer 1

我不确定 tilesloaded 是如何工作的，但这就是我为模态做的事情

$('#myModal').on('show.bs.modal', function () {
    resizeMap();
})

function resizeMap() 
{
    if (typeof map == "undefined") return;

    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
}

在模态对话框窗口上加载谷歌地图不起作用

1 个答案: