Question

点击链接后我需要在bootstrap 3模式框中加载谷歌地图.js api并使用谷歌地图初始化方法打开模态框：

HTML：

<input id="lat" class="text-input form-control" type="text" size="24" name="lat">
<input id="lon" class="text-input form-control" type="text" size="24" name="lon">
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">Location:
                <input type="text" id="us2-address" style="width: 200px" />Radius:
                <input type="text" id="us2-radius" />
                <div id="us2" style="height: 400px;"></div>Lat.:
                <input type="text" id="us2-lat" />Long.:
                <input type="text" id="us2-lon" />
            </div>
            <div class="modal-footer"> <a href="#" data-dismiss="modal"   class="btn">Close</a> <a href="#" class="btn btn-primary" id="save-changes">Save changes</a>

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

JS：

var stillPresent = false;

function initialize() {
    if (stillPresent == false) {
        $('#us2').locationpicker({
            location: {
                latitude: 46.15242437752303,
                longitude: 2.7470703125
            },
            radius: 300,
            inputBinding: {
                latitudeInput: $('#us2-lat'),
                longitudeInput: $('#us2-lon'),
                radiusInput: $('#us2-radius'),
                locationNameInput: $('#us2-address')
            }
        });
        stillPresent = true;
        $("#save-changes").click(function() {
        $("#lat").val($('#us2-lat').val());
        $("#lon").val($('#us2-lon').val());        
        $('#myModal').modal('hide');
        });
    }
}

function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://maps.google.com/maps/api/js?sensor=false&libraries=places&callback=initialize';
    document.body.appendChild(script);
}

$(function () {
    $('#myModal').on('shown.bs.modal', function (e) {
        loadScript();
    });

})

在modalbox中点击保存更改后，我添加了两个用于保存经度和纬度的输入。在第一次location picker工作正常，但点击保存更改后返回到模态框位置选择器不起作用，拖动长和拉不改变 !!

如何解决这个问题？！

DEMO JSFIDDLE

Answer 1

因为您每次显示模式时都在调用loadScript，所以每次都会包含Google Maps API。这将在您的网页上产生不可预测的结果。

您需要做的是包括Google Maps API一次（使用标记以避免多次加载），然后在显示Bootstrap模式时调整Google Map的大小。

使用这个问题的答案： Showing a Google Map in a modal created with Twitter Bootstrap

然后，您可以使用此代码执行所需操作：

var googleMapsLoaded = false;

function loadScript() {
    if (!googleMapsLoaded) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://maps.google.com/maps/api/js?sensor=false&libraries=places&callback=initialize';
        document.body.appendChild(script);
        googleMapsLoaded = true;
    }
}

$(function() {
    $('#myModal').on('shown.bs.modal', function (e) {
        loadScript();
        var map = $('#us2').locationpicker('map').map;
        var currentCenter = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(currentCenter); 
    });
});

Fiddle here

位置选择器无法在谷歌地图初始化

1 个答案: