位置选择器在谷歌地图初始化中不起作用

Question

点击链接后，我需要在 bootstrap 3 modal box 中加载 google map .js api，并使用 google map 初始化方法打开 modalbox，如下所示：

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();
    });

})

在模态框中单击保存更改后，我添加了两个输入以保存经度和纬度。第一次location picker 工作正常，但点击保存更改后返回模态框位置选择器不起作用，拖动后 long 和 lat 未更改！

如何解决这个问题？！

演示JSFIDDLE

Answer 1

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

您需要做的是包含一次 Google Maps API（使用标志以避免多次加载），然后在显示 Bootstrap Modal 时调整 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