Question

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

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

但是，当该部分视图位于Bootstrap模态视图中时。它没有显示任何内容。

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

＆＃13;

 <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>

＆＃13;

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

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

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

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

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

1 个答案: