仅显示部分地图API V3问题

Question

我想在一页上使用两个（或更多）地图。（使用 telerik Grid）

如您所见，如果我尝试打开一行的“详细信息”（可能是第一行、第二行或最后一行）地图将正确显示。如果尝试展开另一行的详细信息，地图将显示无效。我无法理解我做错了什么？

 function onTabSelect(e) {
//...
                    if (node.childNodes.length == 0) {// If Coordinates tab not contain map
                    map = document.createElement('DIV');
                    map.setAttribute('id', selectedGeoObject.Id + "_gmap"); //Generates Id for div container
                    map.setAttribute('style', 'width:400px; height:278px; margin : 0px; padding : 0px;');
                    node.appendChild(map);
                    initMap(map);
                }
}
    function initMap(gMapContainer) {
        var myLatlng = new google.maps.LatLng(51.0, 9.0);
        var myOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        //width:400px; height:278px;
        var gMap = new google.maps.Map(gMapContainer, myOptions);
        // Can not solve the problem.
        //google.maps.event.trigger(gMap, 'resize');
        //gMap.setCenter(myLatlng);
        return gMap;
    }

如果我尝试调整浏览器窗口的大小，两个地图都会正确显示（我已经在 Firefox、Opera、Chrome 中尝试过此操作）。你能帮我解决这个奇怪的错误吗？

Answer 1

在窗口调整大小时调用此方法：

 google.maps.event.trigger(gMap, 'resize'); 

像这样：（请注意，您需要通过 document.getElementByID 等获取 gMap 句柄）

window.onresize = function(event) {
 google.maps.event.trigger(gMap, 'resize');   
}

Answer 2

您可以添加此代码：

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
});

Answer 3

问题是，当您尝试使用 style.visibility ='hidden' 初始化 DIV 标记内的 Google 地图

来解决此问题时，您必须在可见 DIV 内声明 map_canvas div，例如：

<div id="MapWindow"> 
    <div id="map_canvas" style="width:390px; height:390px; border-color: black"></div>
</div>

现在，如果您使用 jQuery ，在 $(function()) 中，您应该将“MapWindow”可见性设置为隐藏（如果您希望 GMap 开始隐藏）。

<script type="text/javascript">

var map;
var marker;

$(function () {
    initGoogleMap();
    document.getElementById("MapWindow").style.visibility = 'hidden';
});

function initGoogleMap() {
    var latlng = new google.maps.LatLng(-30, -60);
    var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
    map = new google.maps.Map(document.getElementById("map_canvas"), options);
    marker = new google.maps.Marker({
        draggable: false,
        position: latlng,
        map: map,
        title: ''
    });
}

function OpenPopupWindow()
    document.getElementById("MapWindow").style.visibility = 'visible';
    $('#MapWindow').data('tWindow').center().open();        
}

</script>

最后，当您想要显示 DIV（或弹出窗口，例如）时，在显示之前，您必须将 DIV 可见性设置为“visible”

；）