mvc谷歌地圖在bootstrap局部視圖模式不起作用

Iam做一個MVC Bootstrap谷歌地圖V3應用程序。mvc谷歌地圖在bootstrap局部視圖模式不起作用

當用戶輸入完整地址時，它顯示在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是這樣的。

而我的部分觀點是這樣的。

來源

2017-03-12 Diego

正如我在型動物問題播種，我做了同樣的改變我的腳本

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

來源

2017-03-13 23:10:45 Diego

mvc谷歌地圖在bootstrap局部視圖模式不起作用

回答

相關問題