Question

我在网络上有完整的谷歌地图，点击标记，左侧的面板会弹出。问题是我的地图大小仍然相同，其中面板占了一半。

我有一个代码可以将选中的标记居中，并在左侧面板突然弹出但新功能似乎不起作用时在新窗口中调整地图的大小：

function initialize() {

    var center = new google.maps.LatLng(XXXXXX, XXXXXXX);

    var map = new google.maps.Map(document
    .getElementById('MAP'), {
        zoom : 13,
        minZoom: 5,
        center : center,
        styles :　googleStyle,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    var infoBubble = new InfoBubble({
        map: map,
        padding: 10,
        arrowPosition: 30,
        arrowSize: 10,
        backgroundColor: 'white',
        borderColor: 'white',
        borderRadius: 4,
        arrowStyle: 2,
        maxWidth: 250,
        hideCloseButton: true,
    });

    Some more codes related to marker...

    google.maps.event.addListener(markers[i], 'click', function(e) {

        Some more codes related to marker...

        // THIS I THINK IS THE ONE TO RESIZE THE MAP
        var latLngAdjust = new google.maps.LatLng(csCoordinateLat, csCoordinateLng + 0.00018);
        layoutV.layout.open('west');   // THE LAYOUT THAT WILL POP OUT

        window.setTimeout(function() {
            map.setZoom(17);
            map.panTo(latLngAdjust);  // THIS I ASSUME TO RESIZE THE MAP AND CENTER THE MARKER CHOSEN
        }, 300);
    }
}

任何人都知道为什么地图没有调整大小，而面板只是放在地图的顶部？

Answer 1

点击

后添加

var resize=document.getElementId('map').style;
resize.width = '50%';//put your desire width
//other option here

Answer 2

我有解决方案来解决该错误

在Js代码中添加以下功能

 function resizeMap(m) {
        x = m.getZoom();
        c = m.getCenter();
        google.maps.event.trigger(m, 'resize');
        m.setZoom(x);
        m.setCenter(c);
    };

// m是“地图”

点击

后添加

resizeMap(map);

希望解决方案可以提供帮助。

谷歌地图api调整大小地图

2 个答案: