在bootstrap局部视图模式中的mvc谷歌地图不起作用

Question

我正在做一个MVC Bootstrap Google Map V3应用程序。

当用户输入完整地址时，它将显示在Google Map 。 如果显示的div是在Partial View 。 看起来很好。

但是，当部分视图处于Bootstrap模态视图中时。 它没有显示任何东西。

当它工作时就是这种情况..

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false"></script> <script type="text/javascript"> var geocoder; var map; var address = "Full Address "; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 14, center: latlng, // mapTypeControl: true, // mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, // navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("dvMap"), myOptions); if (geocoder) { geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { map.setCenter(results[0].geometry.location); var infowindow = new google.maps.InfoWindow( { content: '<b>'+address+'</b>', size: new google.maps.Size(150,50) }); var marker = new google.maps.Marker({ position: results[0].geometry.location, map: map, title:address }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } else { alert("No results found"); } } else { alert("Geocode was not successful for the following reason: " + status); } }); } } </script> <div style="width: 600px; height:400px"> @Html.Partial("~/Views/Shared/_ShowMap.cshtml") </div> 

这是对我的部分视图的调用

在这种情况下我的部分视图很简单

不起作用的情况是这样的。

我在JavaScript函数的bootom中添加了这一行...

 $("#myModalMapa").modal();

HTML Div就是这样的。

我的部分观点看起来像这样。

Answer 1

当我在不同的问题中播种时，我对我的脚本进行了相同的更改

  $(document).ready(function () { $('#myModalMapa').on('shown.bs.modal', function () { var currentCenter = map.getCenter(); // Get current center before resizing google.maps.event.trigger(map, "resize"); map.setCenter(currentCenter); // Re-set previous center }); });