我正在尝试在 Google map 上显示信息窗口。它显示完美，当您将鼠标悬停在标记上时，它会加载一个信息窗口，但 map 会跳转以适合窗口。我不希望 map 移动，而是信息窗口根据 map 设置其位置。 Booking.com 有这样的东西。

编辑:添加了我的代码

这是我的代码的精简版。我从 AJAX 服务 获取所有信息，并且该服务返回response(它也包含更多信息)。

$.ajax({
    url: 'URL',
    dataType: "json",
    type: "GET",
    success: function(response) {
        // delete all markers
        clearOverlays();

        var infowindow = new google.maps.InfoWindow();

        for (var i = 0; i < response.length; i++) {
            item = response[i];

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.lat, item.lng),
                map: map,
                url: item.detail_url
            });

            markersArray.push(marker);

            // display infowindow
            google.maps.event.addListener(marker, "mouseover", (function(marker, item) {
                return function() {
                    infowindow.setOptions({
                        content: 'SOME CONTENT HERE FOR INFOWINDOW'
                    });

                    infowindow.open(map, marker);
                }
            })(marker, item));

            // remove infowindow
            google.maps.event.addListener(marker, 'mouseout', function() {
                infowindow.close();
            });

            // marker click
            google.maps.event.addListener(marker, 'click', function() {
                window.location.href = marker.url;
            });
        }
    }
});

如下图所示，第一个图像显示了显示在标记底部的信息窗口，而第二个图像显示了显示在标记顶部的信息窗口。 map 没有移动，但信息窗口将其位置设置在 map 的边界内。

最佳答案

在您设置信息窗口选项的声明 infowindow.setOptions 中，添加以下选项以在显示信息窗口时禁用 map 的平移，disableAutoPan : true .

然而，这也意味着您需要计算可用于在 map 上显示信息窗口的不动产，并使用 position 选项为其指定位置。否则无法保证您的信息窗口在 map 上完全可见。

https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions

编辑:如何计算屏幕空间

我意识到我对计算可用于设置信息窗口位置的屏幕空间的建议含糊不清，而你的部分问题是实际设置信息窗口的位置。因此，我更新了关于如何计算屏幕空间和调整信息窗口位置的答案。

关键是首先将您的点从 LatLng 转换为像素，并找出 map 上标记的像素坐标与 map 中心像素坐标的关系。以下代码段演示了如何做到这一点。

getPixelFromLatLng: function (latLng) {
    var projection = this.map.getProjection();
    //refer to the google.maps.Projection object in the Maps API reference
    var point = projection.fromLatLngToPoint(latLng);
    return point;
}

获得像素坐标后，您需要找出标记当前位于 map Canvas 的哪个象限。这是通过将标记的 X 和 Y 坐标与 map 进行比较来实现的，例如所以:

quadrant += (point.y > center.y) ? "b" : "t";
quadrant += (point.x < center.x) ? "l" : "r";

在这里，我根据点与 map 中心的相对位置来确定该点是在 map 的右下角、左下角、右上角还是左上角。请记住，这就是我们使用像素而不是 LatLng 值的原因，因为 LatLng 值将始终产生相同的结果 - 但现实是标记可以位于 map Canvas 的任何象限中，具体取决于平移。

一旦知道标记位于哪个象限，就可以为信息窗口提供偏移值以定位它，使其在 map 上可见 - 如下所示:

if (quadrant == "tr") {
    offset = new google.maps.Size(-70, 185);
} else if (quadrant == "tl") {
    offset = new google.maps.Size(70, 185);
} else if (quadrant == "br") {
    offset = new google.maps.Size(-70, 20);
} else if (quadrant == "bl") {
    offset = new google.maps.Size(70, 20);
}
//these values are subject to change based on map canvas size, infowindow size

一旦确定了偏移值，您就可以在调用 infoWindow.open() 方法的任何监听器上调整信息窗口的 pixelOffset。这是通过使用 infowindows 的 setOptions() 方法完成的:

infowindow.setOptions({pixelOffset : self.getInfowindowOffset(self.map, marker)}); 

这是一个有效的 JSFiddle example上述解决方案。

注意:您会注意到信息窗口上显示的恼人的“箭头”与您的信息窗口的位置无关，这是 Google Map 信息窗口默认设置的一部分，我找不到合适的方法摆脱它。有一个建议here ，但我无法让它工作。或者，您可以使用 infobox library或 infobubble library - 为您提供更多样式选项。

关于javascript - 显示信息窗口后阻止谷歌地图移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18404948/