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

2019-09-28 13:35:50 阅读：288 来源： 互联网

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

我正在尝试在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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