全屏控制和维护地图中心

Question

目前，如果我说启用了 FullscreenControl 的适度大小的 Google 地图显示端口（300 像素 x 300 像素），并且我将小地图视图集中在特定区域，例如...法国... . 然后我点击全屏按钮以将显示扩展到我的屏幕边缘（1920 像素 x 1080 像素），法国被隐藏在我屏幕的左上角。

基本上，原始 300px x 300px 显示的左上角移动到我屏幕的左上角，世界地图的其余部分从该角以原始缩放级别延伸。

有什么方法可以基本上设置它，以便全屏显示打开时与原始显示具有相同的中心点，反之亦然，当全屏模式关闭时？

切换全屏按钮是否会触发事件或任何我可以将 setCenter 挂接到的事件？

Answer 1

我编写的代码有点奇怪，但效果很好：

<script>
    var map;
    var center = -1;
    var isFullScreen = false;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: { lat: -34.397, lng: 150.644 }
        });
        center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() };
        google.maps.event.addDomListener(map, 'bounds_changed', onBoundsChanged);
    }
    function onBoundsChanged() {
            var isFullHeight = $(map.getDiv()).children().eq(0).height() == window.innerHeight;
            var isFullWidth = $(map.getDiv()).children().eq(0).width() == window.innerWidth;
            if (isFullHeight && isFullWidth && !isFullScreen) {
                isFullScreen = true;
                map.setCenter(center);
                console.log('FULL');
            } else if (!isFullWidth||!isFullHeight){
                if (isFullScreen) {
                    map.setCenter(center);
                }
                isFullScreen = false;
                console.log('NOT-FULL');
            }
            center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() };            
    }
</script>

我使用 bounds_changed 事件。

如果我检测到地图处于全屏状态，我会将地图设置在我在先前事件中注意到的中心，并将布尔值设置为 true。如果地图不是全屏，我检查布尔值是否为真，这意味着在之前的事件中地图是全屏的，所以我重新定位地图，然后检查布尔值是否为假。在活动结束时，我将中心保存在下一个活动的变量中。

这一切都不是很清楚...

您可以在 Stack Overflow 中咨询this 帖子。

注意： 如果您在 Web 应用程序的所有页面中显示单个地图，此代码将不起作用。我没有找到消除此错误的方法。非常感谢您的建议，谢谢。

另请注意： 我的代码受到了先例答案的启发。但是您可以找到相同的代码here。请注意，这不是重复的答案。我在其中添加了我自己的部分代码。

如果您有任何问题或 cmets，请告诉我。

Answer 2

试试这个

/** To detect Map Full Screen event */
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged ); //Event listener map bound change.
var isMapFullScreen = false;
var defaultLocation = {
    lat: 27.94,
    lng: -82.45
};
function onBoundsChanged() {
    if(!isMapFullScreen){
        var isFullHeight = $(map.getDiv()).children().eq(0).height() == window.innerHeight;
        var isFullWidth= $(map.getDiv()).children().eq(0).width()  == window.innerWidth;
        if (isFullHeight && isFullWidth) {
            isMapFullScreen = true;
            myMarker.setPosition(defaultLocation);
            map.setCenter(defaultLocation);
            console.log('FULL');
        } else {
           isMapFullScreen = false; 
           console.log('NOT-FULL');
        }
    }
}