我的 bootstrap3 模式:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="map-canvas" style="width:530px; height:300px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
我的 JavaScript:
<script type="text/javascript"
src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>
<script type="text/javascript">
$("#myModal").on("shown.bs.modal", function () {
init();
google.maps.event.trigger(map, "resize");
});
var lat = 10.444598;
var lon = -66.9287;
function init() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat, lon),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: 'Hello World!'
});
}
}
</script>
我在 stackoverflow 上阅读了一些关于此问题的线程,但我尝试将解决方案实现到我的代码中。然而我的模态仍然是空白的。我做错了什么?
最佳答案
如果您将 Google map 添加到 ModalWindow,您可能会遇到如下所述的不同问题:
我试图避免这些加载问题:
<div id="mapCanvas" class="map_popup"></div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="fontface" id="myModalLabel">Header</h2>
</div>
<div class="modal-body">
<div class="load_map">
</div>
- 在开始时加载 map (#mapCanvas)
将其附加到 ModalWindow (.load_map)
//JS Part var popupmap = (function() { var map_popup, marker_popup, geocoder, latLng; //init the code for the popup var init = function() { geocoder = new google.maps.Geocoder(); latLng = new google.maps.LatLng(52.524744168143755, 13.417694102972746); map_popup = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 10, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, streetViewControl: false, panControl:false, zoomControl: false }); google.maps.event.addListenerOnce(map_popup, 'idle', function(){ $('.load_map').append($('#mapCanvas')); }); };
希望这有帮助。
关于javascript - 在 Bootstrap 模式上显示谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24205028/