Question

我有手风琴（twitter-bootstrap），每个都有一张地图。手风琴音乐会在foreach中产生。地图生成为局部视图，采用纬度和经度以及块ID的模型。

它呼吁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="map-canvas-@Model.Id.ToString()" style="width: 470px; height: 270px;"></div>

<script type="text/javascript">
    $('#map-canvas-@Model.Id').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。请帮我解决这个问题。

Answer 1

地图si仅显示在可见的div中。另一方面，你只看到一个灰色的背景，在某些情况下只看到左上角的一小部分地图。

要查看每个块中的地图，您应该使用map.resize()或者更好地在每次显示新地图时使用genaration函数。初始化tipcally仅在创建窗口时调用，这种情况下不可见的地图失败

谷歌地图js api。第

1 个答案: