Question

我需要在打开模态框后加载谷歌地图链接（远程）。

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

谷歌地图链接：http://maps.google.com/maps/api/js?sensor=false&libraries=places

DEMO：http://jsfiddle.net/Lzv7w/9/

如果我将谷歌地图链接添加到外部资源jsfiddle工作。但我需要在打开模态后加载谷歌地图链接。

如何加载？

Answer 1

Google提供了一个很好的教程here，可能会对您有所帮助。以下代码应该可以解决您的问题。请注意，它可能不适用于jsfiddle，但它应该适用于您的真实页面。

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

此外，here是指向类似问题的链接。

load get remote link into bootstrap modal box

1 个答案: