0

上的許多地圖我有手風琴(twitter-bootstrap),每個地圖上都有。 在foreach中生成手風琴塊。地圖生成爲局部視圖,該視圖使用經緯度和塊ID進行建模。谷歌地圖js api。頁面

它調用的foreach:

@if (item.Latitude != null) 
{ 
    <p>Map:</p> 
    <div class="map-margin"> 
     @{Html.RenderAction("Map", "Default", new {model = item});} 
    </div> 
} 

和行動返回這個局部視圖:

@model MPS.Administration.Models.ReportModel 

<div id="[email protected]()" style="width: 470px; height: 270px;"></div> 

<script type="text/javascript"> 
    $('#[email protected]').ready(function() { 
     initialize(); 
    }); 

    function initialize() { 

     var lat = @Model.Latitude; 
     var lng = @Model.Longitude; 

     var latlng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude); 
     debugger; 

     var mapOptions = { 
      center: latlng, 
      zoom: 17, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var name = 'map-canvas-' + @Model.Id.ToString(); 
     var map = new google.maps.Map(document.getElementById(name),mapOptions); 

     debugger; 

     // create a marker 
     var image = '../Content/Images/map_icon.png'; 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: image 
     }); 
    } 
</script> 

在佈局中,我有JS API的腳本。

現在我有4塊,但只有最後有地圖塊(它只有google標誌和灰色背景沒有地圖:()在調試器中,我看到lat和lng是相同的所有4倍。問題是我如何調用initialize()map。請幫我解決這個問題

回答

0

地圖si只顯示在可見的div中,對於其他你只能看到一個灰色的背景,在某些情況下只有一小部分

要在每個塊中查看地圖,您應該使用map.resize()或更高版本,每次顯示新地圖時都使用genaration函數。初始化tipcally僅在調用時纔會調用窗戶被創建並且這種情況下地圖不可見失敗