Javascript 防止谷歌地图在显示信息窗口后移动

我试图在谷歌地图上显示一个信息窗口。它显示得非常完美，当你将鼠标悬停在一个标记上时，它会加载一个信息窗口，但地图会跳转以适应该窗口。我不希望地图移动，而是希望infowindow根据地图设置其位置。Booking.com有类似的功能

编辑：添加了我的代码

这是我的代码的精简版本。我从一个AJAX服务中获取所有信息，该服务返回

响应

（其中也包含一些更多信息）

$.ajax({
url:'url'，
数据类型：“json”，
键入：“获取”，
成功：功能（响应）{
//删除所有标记
clearOverlays（）；
var infowindow=new google.maps.infowindow（）；
对于（变量i=0；i

正如您在下面看到的，第一个图像显示了显示在标记底部的信息窗口，而第二个图像显示了显示在标记顶部的信息窗口。地图不会移动，但信息窗口会在地图边界内设置其位置

---

在设置信息窗口选项的声明中，添加以下选项以在显示信息窗口时禁用地图平移，

disableAutoPan:true

但是，这也意味着您需要计算可用的不动产，以便在地图上显示信息窗口，并使用

位置

选项为其指定位置。否则就不能保证您的信息窗口在地图上完全可见

编辑：如何计算屏幕不动产

我意识到我的建议是相当模糊的，即计算可用于设置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";

一旦确定了偏移量值，就可以在调用

infowindow.open（）

方法的任何侦听器上调整infowindow的

pixelOffset

。这是通过使用infowindows的

setOptions（）

方法完成的：

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

以下是上述解决方案的工作原理

---

注意：你会注意到infowindow上的恼人的“箭头”显示了你的infowindow的位置，这是默认Google Map的infowindow设置的一部分，我找不到一个合适的方法来摆脱它。有个建议，但我没能付诸实施。或者，您可以使用或-来为您提供更多的样式选择。

Suvi Vignarajah的回答很好，我不喜欢它的地方是窗户的边缘位置是多么不可预测

我对其进行了调整，使气泡按预期粘在墙上：

唯一的条件是您需要知道信息窗口的

宽度

&

高度

，您可以很好地定位它。你可以通过地图的像素计算出来。如果您不知道，可以在屏幕外初始化信息窗口，获取其大小，然后在正确的位置再次打开它。难看但会有用

通过运行此函数，在地图初始化时首先在覆盖上初始化：

    ourOverlay:null,
    createOverlay:function(){
        this.ourOverlay = new google.maps.OverlayView();
        this.ourOverlay.draw = function() {};
        this.ourOverlay.setMap(this.map);
    },

然后在

open

事件中调整偏移量，如下所示：

getInfowindowOffset: function (map, marker) {
    // Settings
    var iwWidth = 240; // InfoWindow width 
    var iwHeight = 190; // InfoWindow Height
    var xOffset = 0;
    var yOffset = 0;

    // Our point of interest
    var location = this.ourOverlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 

    // Get Edges of map in pixels: Sout West corner and North East corner
    var swp = this.ourOverlay.getProjection().fromLatLngToContainerPixel(map.getBounds().getSouthWest()); 
    var nep = this.ourOverlay.getProjection().fromLatLngToContainerPixel(map.getBounds().getNorthEast()); 

    // Horizontal Adjustment
    if(location.x<iwWidth/2){
        xOffset= iwWidth/2-location.x;
    }else if(location.x>nep.x-iwWidth/2){
        xOffset = (nep.x-iwWidth/2)-location.x ;
    }

    // Vertical Adjustment
    if(location.y<iwHeight){
        yOffset = location.y + iwHeight-(location.y-nep.y);
    }

    // Return it
    return new google.maps.Size(xOffset, yOffset);

},

并使用以下代码设置气泡的样式：

.infobox-popup{
    background: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
    margin-left: -100px;
    margin-bottom: 30px;
    width: 200px;
    -webkit-box-shadow: 0 0 1px 0 #595959;
    box-shadow: 0 0 1px 0 #595959;
}

---

谢谢Suvi Vignarajah。我知道

disableAutoPan

但问题是我无法计算地图上的不动产并使用

position

选项给infowindow一个位置。@BurakErdem我提供了一种方法，您可以使用它来计算屏幕不动产，从而在我编辑的答案中相应地定位您的infowindow。希望这能为您提供一些工作。您的实现非常有效。我刚刚更新了代码（）以删除底部箭头。我知道这不是最好的解决方案，但它很有效。有人可能想添加额外的CSS来模拟谷歌地图信息窗口的功能。谢谢。是的，通过js进行DOM操作可能不是最理想的方式——但现在它已经做到了。这个答案真的很少见！干得好。谢谢你，伙计，你救了我一天，如果你能修复断开的链接将是惊人的（我已经修复了infobox 1）

getInfowindowOffset: function (map, marker) {
    // Settings
    var iwWidth = 240; // InfoWindow width 
    var iwHeight = 190; // InfoWindow Height
    var xOffset = 0;
    var yOffset = 0;

    // Our point of interest
    var location = this.ourOverlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 

    // Get Edges of map in pixels: Sout West corner and North East corner
    var swp = this.ourOverlay.getProjection().fromLatLngToContainerPixel(map.getBounds().getSouthWest()); 
    var nep = this.ourOverlay.getProjection().fromLatLngToContainerPixel(map.getBounds().getNorthEast()); 

    // Horizontal Adjustment
    if(location.x<iwWidth/2){
        xOffset= iwWidth/2-location.x;
    }else if(location.x>nep.x-iwWidth/2){
        xOffset = (nep.x-iwWidth/2)-location.x ;
    }

    // Vertical Adjustment
    if(location.y<iwHeight){
        yOffset = location.y + iwHeight-(location.y-nep.y);
    }

    // Return it
    return new google.maps.Size(xOffset, yOffset);

},

            GmapsManager.infowindow = new InfoBox({
            content:'',
            alignBottom: true,
            closeBoxURL: "",
        });

.infobox-popup{
    background: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
    margin-left: -100px;
    margin-bottom: 30px;
    width: 200px;
    -webkit-box-shadow: 0 0 1px 0 #595959;
    box-shadow: 0 0 1px 0 #595959;
}