谷歌地图js-api.页面上有许多地图

Google maps js api. Many maps on page

本文关键字：许多 地图 js-api 谷歌地图      更新时间：2023-09-26

我有手风琴（twitter引导程序），每个都有一个地图。手风琴块在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四次都是一样的。我认为问题在于如何调用initialize（）映射。请帮我解决这个问题。

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

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

相关文章：