javascript – 显示Infowindow后阻止谷歌地图移动

我正在尝试在Google地图上显示信息窗口.它显示完美,当你将鼠标悬停在标记上时,它会加载一个信息窗,但是地图会跳转到适合窗口的状态.我不希望地图移动,而是根据地图设置其位置. Booking.com有类似的东西.

编辑：添加了我的代码

这是我的代码的精简版本.我从AJAX服务获取所有信息,此服务返回响应(其中包含更多信息).

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

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

解决方法:

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

但是,这也意味着您需要计算您可用的房地产,以便在地图上显示信息窗口,并使用头寸选项给它一个位置.否则,将无法保证您的信息窗口在地图上完全可见.

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

编辑：如何计算屏幕房地产

我意识到,当我的部分问题是实际设置infowindow的位置时,我的建议是计算可用于设置信息窗口位置的屏幕空间.所以我已经提供了一个更新我的答案,你可以如何计算屏幕空间并调整你的infowindow的位置.

关键是首先将您的点从LatLng转换为像素,然后找出地图上标记的像素坐标与地图中心的像素坐标的关系.以下代码段演示了如何完成此操作.

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坐标与地图进行比较来实现的,如下所示：

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

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

一旦你知道了标记所在的象限,就可以给infowindow提供偏移值来定位它,使它在地图上可见 – 就像这样：

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()方法的任何侦听器上调整infowindow的pixelOffset.这是通过对infowindows使用setOptions()方法完成的：

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

这是上述解决方案的工作JSFiddle example.

注意：你会注意到infowindow上显示臭名昭着的“箭头”,显示你信息窗口的位置,这是默认谷歌地图设置信息窗口的一部分,我找不到一个正确的方法来摆脱它.有一个建议here,但我无法让它工作.或者,您可以使用infobox library或infobubble library – 它为您提供更多样式选项.

标签：infowindow,javascript,google-maps,google-maps-api-3
来源： https://codeday.me/bug/20190928/1827490.html