Question

我想在一个页面上使用两个（或更多）地图。（使用telerik Grid） its two rows in 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>

现在，如果你在$（function（））中使用jQuery，你应该在隐藏中设置'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>

最后，当您想要显示de DIV（或弹出窗口）时，在显示它之前，您必须在“可见”中设置DIV可见性

）

仅显示地图API V3问题的一部分

3 个答案: