javascript - Bootstrap 部分 View 模式中的 MVC 谷歌地图不起作用

Question

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

当用户输入完整地址时，它会显示在Google map 中。如果显示的 div 位于 Partial View 中。看起来不错。

但是，当该部分 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>

这是对我的部分 View 的调用

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

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

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

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

HTML Div是这样的。

我的部分 View 如下所示。

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