Question

目前看来，如果我说一个适度大小的谷歌地图显示端口（300像素×300像素）启用了FullscreenControl，并且我将这个小地图视图集中在特定区域，例如......法国......然后我点击全屏按钮将显示扩展到我的屏幕边缘（1920px×1080px），法国在屏幕的左上角显得格格不入。

基本上，原始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帖子。

注意： 如果您在网络应用的所有页面中显示单个地图，则此代码无效。我找不到删除此错误的方法。非常感谢您的建议，谢谢。

另请注意： 我的代码的灵感来自先前的答案。但是，您可以找到相同的代码here。请注意，这不是一个重复的答案。我在其中添加了自己的部分代码。

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

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');
        }
    }
}

全屏控制和维护地图中心

2 个答案: