以使用Twitter Bootstrap创建的模式显示Google地图

本文介绍了以使用Twitter Bootstrap创建的模式显示Google地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正尝试使用Twitter Bootstrap将Google地图插入模式。模态显示出现地图的形状，但只显示地图的一部分，其余部分显示为灰色。在调整屏幕大小后，地图始终正确显示，尽管居中显示在错误的地方。 我搜索并找到了建议，例如调用地图的调整大小事件或设置地图图像的最大宽度为零，但这些建议迄今为止都没有帮助。看起来地图只是在隐藏的元素中找不到正确的大小。 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 fadeid =myModal> < div class =modal-header> < h3>< / h3> < / div> < div class =modal-body> < div id =mapCanvasstyle =width：500px; height：400px>< / div> < / div> < div class =modal-footer> < a href =＃class =btndata-dismiss =modal>关闭< / a> < / div> < / div> 我正在使用Twitter Bootstrap v2.0.4。我需要一些帮助，因为我无法正确触发resize事件或编辑css，因此Google map无法使用。 解决方案当Google地图放置在动态元素中时（例如：调整大小，淡入淡出等），Google地图确实会显示灰色区域。触发调整大小功能是正确的，应该在动画完成后调用它（引导程序3中的 shown.bs.modal 事件或在Bootstrap 2中显示 事件）： $ b（$b $（＃myModal）。on（shown.bs.modal，function（）{ google.maps.event .trigger（map，resize）; }）; 在Bootstrap 2中，您将执行： google.maps.event.trigger（map， resize）; }）; （其中 map 是变量名称（详情请参阅 Google地图文档）和＃ myModal 元素中的ID）。 I'm trying to insert a Google map into a modal using Twitter Bootstrap. The modal shows up with the shape of the map present, but only part of the map is displayed, the rest is gray. Upon resizing the screen the map always shows up correctly, although centered in the wrong place.I've searched and found suggestions such as calling the map's resize event, or setting the max-width of the map image to none, but none of these suggestions have helped so far. It seems like the map is failing to figure out it's correct size as long as it's in an element that's hidden.JSfunction 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>I'm using Twitter Bootstrap v2.0.4. I need some help because I'm failing to trigger the resize event correctly or editing the css so that the Google map is left alone. 解决方案 Google Maps indeed displays "Grey" area's when it's placed inside a dynamic element (for example: One that resizes, fades etc.). You're right about triggering the "resize" function, which should be called once the animation is complete (the shown.bs.modal event in Bootstrap 3 or the shown event in Bootstrap 2):$("#myModal").on("shown.bs.modal", function () { google.maps.event.trigger(map, "resize");});In Bootstrap 2, you will do:$('#myModal').on('shown', function () { google.maps.event.trigger(map, "resize");});(where map is the variable name of your map (see Google Maps documentation for further details), and #myModal the ID from your element). 这篇关于以使用Twitter Bootstrap创建的模式显示Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！