时间戳

首页 > 解决方案 > Css-Zoomed Google Maps 信息窗口位置错误

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

问题描述

谷歌地图不支持在我想使用它的区域进行 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.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

标签： javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers

解决方案

通过做这个：

.zoom {
   zoom: 2;
}

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

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

推荐阅读