javascript - 全屏控制和维护 map 中心

Question

目前，如果我说一个中等大小的 Google map 显示端口(300 像素 x 300 像素)并启用全屏控制，我会将小 map View 置于特定区域的中心，例如……法国…… . 然后我点击全屏按钮将显示扩展到我的屏幕边缘(1920 像素 x 1080 像素)，法国被隐藏在我屏幕的左上角。

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

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

切换全屏按钮会触发事件或任何我可以将 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 事件。

如果我检测到 map 处于全屏状态，我将 map 设置在我在先例事件中注意到的中心，并将 bool 值设置为 true。如果 map 不是全屏，我会检查 bool 值是否为真，这意味着在之前的事件中 map 是全屏的，所以我将 map 重新​​居中，然后检查 bool 值是否为假。在事件结束时，我将中心保留在下一个事件的变量中。

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

可以咨询this在 Stack Overflow 中发帖。

注意: 如果您在网络应用程序的所有页面中显示单个 map ，则此代码不起作用。我找不到消除此错误的方法。非常感谢您的建议，谢谢。

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

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