Question

我已经看到了几个关于类似问题的问题，但没有一个问题解决了我的问题，所以我会继续前进。

我在谷歌地图上遇到以下问题：我尝试使用javascript加载带谷歌地图的模态对话框：

<html>
    <body>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

        <a onclick="locationDetail(76)" id="76" data-toggle="modal" data-target="#myModalLocationDetails">Edit</a>

        <div id="myModalLocationDetails" class="modal modal modal-metro border-mauve fade in" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: none;">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div id="locationEdit" class="col-md-12">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </body>
</html>

JavaScript函数：

function locationDetail(locId) {
    $("#locationEdit").load('/Home/LocationEdit/' + locId, function () {
            initialize(44.7862, 20.45345);
        }
    );
}

在#locationEdit（LocationEdit.html）中加载的代码是：

<html>
<head></head>
<body>
<script type="text/javascript">

function initialize(latitude, longitude) {

    var myLatlng = new google.maps.LatLng(latitude, longitude);

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 12,
        center: myLatlng,
        //mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        panControl: true
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
}

</script>

<div id="map-canvas">
</div>
<button type="button" class="btn btn-primary" onclick="initialize(44.7862, 20.45345)">Update</button>
</body>
</html>

当我点击编辑时，模态对话框显示（样式从显示=＆＃34;无＆＃34;到显示=＆＃34;块＆＃34;）并且地图显示确定。当我关闭模态对话框时，单击关闭并再次加载模式对话框，单击编辑，我的地图显示已损坏，如问题上的图像所示：Google Maps Api v3 Maps in Ui-Tabs are cut

当我点击更新地图加载好！这似乎是在.load（）中调用initialize（）函数的问题......或者不是......我不知道。

我试过这个解决方案： - Google Maps Api v3 Maps in Ui-Tabs are cut 这个： - jquery click doesn't work on ajax generated content

这些解决方案对我没有用。非常感谢你的sugestions！

编辑：我解决了调用bootstrap事件的问题：

$(function() {
    $('#myModalLocationDetails').on('shown.bs.modal', function () {
        initialize(44.7862, 20.45345);
    });
});

http://getbootstrap.com/javascript/#modals-usage有此事件致电的文档。

你是否知道其他一些方法不使用bootstrap而是使用其他一些jquery事件？谢谢！

Answer 1

尝试在.load（）之前清理#locationEdit div - 类似于

function locationDetail(locId) {
    $("#locationEdit").html(''); // or $("#locationEdit").empty();
    $("#locationEdit").load('/Home/LocationEdit/' + locId, function () {
            initialize(44.7862, 20.45345);
        }
    );
}

Google地图无法使用javascript进行第二次加载

1 个答案: