显示信息窗口后防止谷歌地图移动 [英] Preventing Google Maps Move After Displaying Infowindow

问题描述

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

I'm trying to display a infowindow on a Google Maps. It displays perfect, when you hover over a marker it loads up a infowindow but the map jumps to fit in the window. I don't want the map to move but rather infowindow set its position according to map. Booking.com has something like this.

添加了我的代码

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

Here is the stripped down version of my code. I'm getting all the info from an AJAX service and this service returns response (which holds some more info too).

$.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;
            });
        }
    }
});

如下所示，第一张图片显示了标记底部显示的信息窗口，而第二张图片显示了标记顶部显示的信息窗口.地图不会移动，但信息窗口将其位置设置在地图边界内.

As you can see below, the first image shows the infowindow displayed at bottom of marker while second one shows the infowindow displayed on top of the marker. The map doesn't move but infowindow sets its position within the boundries of the map.

推荐答案

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

In your declaration for setting the info window options infowindow.setOptions, add the following option to disable the panning of the map when the infowindow is displayed, disableAutoPan : true.

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

However this will also mean you'll need to calculate the real estate you have available to display the infowindow on your map and give it a position using the position option. Otherwise it won't be guaranteed that your infowindow will be completely visible on the map.

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

如何计算屏幕空间

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

I realize I was pretty vague with my suggestion to calculate the screen real estate available to set the position of your infowindow, when part of your question was to actually set the infowindow's position. So I've provided an update to my answer on how you can calculate the screen real estate and adjust your infowindow's position.

关键是首先将你的点从LatLng转换成像素，然后找出地图上标记的像素坐标与地图中心像素坐标的关系.以下代码段演示了如何做到这一点.

The key is to first convert your points from LatLng to pixels, and find out the pixel coordinate of the marker on the map with relation to the pixel coordinate of the map's center. The following snippet demonstrates how this can be done.

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

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

Once you've got your pixel coordinates, you'll need to find out which quadrant of the map canvas the marker is currently residing in. This is achieved by comparing the X and Y coordinates of the marker to the map, like so:

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

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

Here, I'm determining if the point is in the bottom right, bottom left, top right or top left quadrant of the map based on it's relative position to the map's center. Keep in mind this is why we use pixels as opposed to LatLng values, because LatLng values will always yield the same result - but reality is the marker can be in any quadrant of the map canvas depending on panning.

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

Once you know which quadrant the marker is in, you can give offset values to the infowindow to position it so it's visible on the map - like so:

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.这是通过使用信息窗口的 setOptions() 方法完成的:

Once the offset value is determined you can just adjust the pixelOffset of your infowindow on whatever listener you have invoking the infoWindow.open() method. This is done by using the setOptions() method for infowindows:

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

这是上述解决方案的一个有效 JSFiddle 示例.

Here is a working JSFiddle example of the solution described above.

注意:您会注意到信息窗口上令人讨厌的箭头"显示您的信息窗口的位置，这是信息窗口默认谷歌地图设置的一部分，我找不到合适的方法摆脱它.有一个建议这里，但我无法让它工作.或者，您可以使用 信息框库 或 infobubble 库 - 为您提供更多样式选项.

Note: You will notice the annoying "arrow" on the infowindow displaying desbite the position of your infowindow, this is part of the default Google Map's setting for infowindows and I could not find a proper way of getting rid of it. There was a suggestion here, but I couldn't get it to work. Alternatively you can use the infobox library or the infobubble library - which gives you more styling options.

这篇关于显示信息窗口后防止谷歌地图移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！