在使用Twitter Bootstrap创建的模式中显示Google地图
在使用Twitter Bootstrap创建的模式中显示Google地图
提问于 2012-07-31 22:50:01
我正在尝试使用Twitter Bootstrap将Google地图插入到模式中。模式显示了地图的形状，但只显示了地图的一部分，其余部分是灰色的。调整屏幕大小时，地图始终正确显示，尽管居中位置错误。
我搜索并找到了一些建议，比如调用地图的resize事件，或者将地图图像的最大宽度设置为none，但到目前为止，这些建议都没有帮助。似乎只要它在一个隐藏的元素中，map就无法计算出它的正确大小。
JS
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.219987, 4.396237),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.219987, 4.396237)
});
marker.setMap(map);
}HTML
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3></h3>
</div>
<div class="modal-body">
<div id="mapCanvas" style="width: 500px; height: 400px"></div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>我使用的是Twitter Bootstrap v2.0.4。我需要一些帮助，因为我无法正确触发调整大小事件，也无法编辑css以使Google地图保持原样。
回答 8
Stack Overflow用户
发布于 2013-09-27 18:19:57
对我来说，它是这样工作的(Boostrap 3)：
$("#contact-modal").on("shown.bs.modal", function () {
google.maps.event.trigger(map, "resize");
});Stack Overflow用户
发布于 2013-11-05 23:11:58
当使用Bootstrap 3时，您需要使用他们的文档中提供的内容，即使用'shown.bs.modal‘代替'shown’。
示例：
$('#modal').on('shown.bs.modal', function () {
initialiseMap();
});Stack Overflow用户
发布于 2012-10-15 23:02:35
实际上，在div的内容是本地的这种情况下，接受的答案确实有效。不幸的是，我在显示包含在远程数据中的地图时也遇到了同样的问题。获取地图的句柄并调用resize不能正确地居中我的地图。下面是我如何修复远程数据环境中的问题。
在初始化地图的函数中包含脚本标签作为远程数据的一部分
<script type="text/javascript">
function renderMap() {
var point = new google.maps.LatLng(51.219987, 4.396237);
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13,
center: point
});
var marker = new google.maps.Marker({ position: point, map: map, icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png' });
}
</script>在主页上显示的对话框事件中调用函数
<script type="text/javascript">
$(document).ready(function () {
$('#dlgReportInfo').on('shown', function () {
renderMap();
});
})
</script>这样，在初始化贴图之前，就已经在对话框中调整了贴图的大小。希望这能帮助任何其他有类似情况的人。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11742839
复制相关文章
相似问题