Question

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

HTML：

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

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);
}
$('#myModal').on('shown.bs.modal', function(e) {
    loadScript();
});

但是在行动中这不起作用而不是为我显示地图。

如何解决这个问题？！

DEMO FIDDLE

Answer 1

演示中的问题是initialize()函数的范围是onload处理程序。这可以在浏览器控制台中抛出错误中看到。

更改范围，以便该函数在窗口命名空间内是全局的，代码可以正常工作。

我怀疑在您的生产代码中，您已将该函数限定在jQuery就绪处理程序中。

如果您计划多次使用模式

，我还建议您只加载一次谷歌地图脚本

的 DEMO

初始化谷歌地图不适用于模态框

1 个答案: