Css-Zoomed Google Maps 信息窗口位置错误答案

【问题标题】：Css-Zoomed Google Maps Wrong InfoWindow PositionCss-Zoomed Google Maps 信息窗口位置错误
【发布时间】：2021-02-21 04:26:09
【问题描述】：

Google 地图不支持在我想使用它的区域进行 19 或 20+ 的缩放。我正在尝试将它与css有关。我正在创建地图，添加滚轮事件以识别哪个缩放级别的用户。如果它等于 20，我正在向地图添加 css 缩放属性。但是，这一次 infowindow 在我点击时创建在错误的位置。

   map = new google.maps.Map(document.getElementById("map"), {
            center: { lng: 1.393307, lat: 52.824281 },
            fullscreenControl: false,
            type: "HYBRID",
            minZoom: 8,
            maxZoom: 0,
            zoom: 5,
            gestureHandling: 'greedy',
            mapTypeId: 'hybrid',
            streetViewControl: false,
            controlSize: 27,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.HYBRID, "Map"],
            },

        });

Wheel Event 和类的 css

.zoom {
        zoom: 2;
    }
    
 window.addEventListener('wheel', function (event) {
            if (event.deltaY < 0) {
                if (map.getZoom() == 20) {
                    $('#map > div').eq(0).addClass("zoom");

                }
            }
            else if (event.deltaY > 0) {
                if (map.getZoom() <= 20) {
                    $('#map > div').eq(0).removeClass("zoom");

                }
            }
        });

Google 地图点击事件

google.maps.event.addListener(map, "click", (function (mapsMouseEvent) {

            var position = mapsMouseEvent.latLng;
                infowindow.setPosition(position);
            infowindow.setContent("test");
            infowindow.open(map);
        }));

Jsfiddle 现场测试来了； https://jsfiddle.net/mylayf/ubeaL9s2/13

【问题讨论】：

请在这里回答..
@geocodezip 你能看看这里吗？

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

通过这样做：

.zoom {
   zoom: 2;
}

您正在更改容器的大小。但是放大地图是通过加载新的图层数据来完成的。通过乘以容器的大小，图片会更大（以及按钮等），但它不会加载新图层。所以前窗和容器会发生变化。例如，如果您使用 2 的缩放，前窗口将是缩放背景图像的 1/4，如果您单击中间，它将正好在背景图像的右下角。

所以只需将maxZoom: 0 更改为maxZoom: 30 之类的东西。它将加载最大分辨率的图像（等于 maxZoom: 18）。如果这对您来说还不够，则此地图没有更多分辨率，您需要切换到另一个具有更多图层的地图提供商进行缩放。

【讨论】：