Google maps 使用fitbounds时，在地图范围内包括打开的信息窗口

我有一张地图，其中包含多个带有信息窗口的标记。信息窗口需要在页面加载时打开。使用收边将地图居中，以合并所有标记，这是可行的，但它还需要在边界内包含信息窗口。目前，信息窗口在某些地方被裁剪

JS:

你可以在这里看到小提琴：

有人能建议如何让信息窗口进入范围吗？

概念验证

正常显示地图

计算从标记定位点到信息窗口上边缘的像素距离

计算从标记定位点到信息窗口左边缘的像素距离

计算从标记定位点到信息窗口右边缘的像素距离

使用边界右角加上信息窗口宽度的一半和边界顶部加上信息窗口高度的两点来扩展原始边界

用边界左角减去信息窗口宽度的一半和边界顶部加信息窗口高度的两点来扩展原始边界

将贴图调整到新边界

大概可以用上中、左中、右中三点进行细化，这是第一次切割，概念证明，大概可以进行清理和细化

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'));
  var projection = null; 
  google.maps.event.addListener(map,'projection_changed', function() {
    projection = map.getProjection();
  }); 

  var bounds = new google.maps.LatLngBounds();
  if (!projection) 
    google.maps.event.addListener(map, 'idle', computeBounds);
  else 
    computeBounds();

  var myLatlng1 = new google.maps.LatLng(51.525209,-0.09402479999994284);
  bounds.extend(myLatlng1);
  var myLatlng2 = new google.maps.LatLng(51.52106840183588,-0.10866641049801729);
  bounds.extend(myLatlng2);
  //  Fit these bounds to the map
  map.fitBounds(bounds);

  function computeBounds() {    

    var contentString1 = '<div class="map-content"><p>Test1<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
    var infowindow1 = new google.maps.InfoWindow({content: contentString1});
    var marker1 = new google.maps.Marker({position: myLatlng1,map: map,title: 'Test1'});

    google.maps.event.addListener(marker1, 'click', function() {
      infowindow1.open(map,marker1);
    });
    infowindow1.open(map,marker1);
    google.maps.event.addListenerOnce(infowindow1,'domready',calcInfoWindowBounds); 

    var contentString2 = '<div class="map-content"><p><br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
    var infowindow2 = new google.maps.InfoWindow({content: contentString2});
    var marker2 = new google.maps.Marker({position: myLatlng2,map: map,title: 'Test2'});
    google.maps.event.addListener(marker2, 'click', function() {
      infowindow2.open(map,marker2);
    });
    infowindow2.open(map,marker2);

    google.maps.event.addListenerOnce(infowindow2,'domready',calcInfoWindowBounds); 

    function calcInfoWindowBounds(){
      domEls = document.getElementsByClassName('map-content');
      var markerSpace = 32+8;
      var maxTop = 0;
      var maxLeft = 0;
      var maxRight = 0;
      for (var i=0; i<domEls.length; i++) {
        var topOfWindow = domEls[i].offsetHeight + markerSpace;
        var leftOfWindow = domEls[i].offsetWidth/2;
        var rightOfWindow = domEls[i].offsetWidth/2;

        if (topOfWindow > maxTop) maxTop = topOfWindow;
        if (leftOfWindow > maxLeft) maxLeft = leftOfWindow;
        if (rightOfWindow > maxRight) maxRight = rightOfWindow;
      }

      var leftBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast().lat(),bounds.getSouththWest().lng()));
      var rightBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast()));
      var topBounds0 = rightBounds.y + maxTop;
      var rightBounds0 = rightBounds.x + maxRight;
      var leftBounds0 = leftBounds.x - maxLeft;
      bounds.extend(projection.fromPointToLatLng(leftBounds0,topBounds0));
      bounds.extend(projection.fromPointToLatLng(rightBounds0,topBounds0));
      map.fitBounds(bounds);
    }   

  }

}
google.maps.event.addDomListener(window, 'load', initialize);

函数初始化（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）；
var投影=null；
google.maps.event.addListener（映射，'projection_changed'，函数（）{
projection=map.getProjection（）；
}); 
var bounds=new google.maps.LatLngBounds（）；
如果（！投影）
google.maps.event.addListener（映射，'idle'，computeBounds）；
其他的
计算边界（）；
var mylatng1=新的google.maps.LatLng（51.525209，-0.0940247999994284）；
扩展（myLatlng1）；
var mylatng2=新的google.maps.LatLng（51.52106840183588，-0.10866641049801729）；
扩展（myLatlng2）；
//将这些边界拟合到地图上
映射边界（bounds）；
函数computeBounds（）{
var contentString1='Test1
dsfasdf
dsfasdf
dsfasdf
dsfasdf
dsfasdf
dsfasdf

var infowindow1=new google.maps.InfoWindow（{content:contentString1}）；
var marker1=new google.maps.Marker（{position:mylatng1，map:map，title:'Test1'}）；
google.maps.event.addListener（marker1，'click'，function（）{
信息窗口1.打开（地图，标记1）；
});
信息窗口1.打开（地图，标记1）；
google.maps.event.addListenerOnce（infowindow1，'domready'，WindowBounds）；
var contentString2='
dsfasdf
dsfasdf
dsfasdf
dsfasdf
dsfasdf

var infowindow2=new google.maps.InfoWindow（{content:contentString2}）；
var marker2=new google.maps.Marker（{position:mylatng2，map:map，title:'Test2'}）；
google.maps.event.addListener（marker2，'click'，function（）{
信息窗口2.打开（地图、标记2）；
});
信息窗口2.打开（地图、标记2）；
google.maps.event.addListenerOnce（infowindow2，'domready'，WindowBounds）；
函数foWindowBounds（）{
domEls=document.getElementsByClassName（'map-content'）；
var-markerSpace=32+8；
var-maxTop=0；
var maxLeft=0；
var maxRight=0；
对于（变量i=0；i maxTop）maxTop=topOfWindow；
如果（leftOfWindow>maxLeft）maxLeft=leftOfWindow；
如果（rightOfWindow>maxRight）maxRight=rightOfWindow；
}
var leftBounds=projection.fromLatLngToPoint（新的google.maps.LatLng（bounds.getNorthwest（）.lat（），bounds.getSouthwest（）.lng（））；
var rightbunds=projection.fromLatLngToPoint（新的google.maps.LatLng（bounds.getNorthEast（））；
var topBounds0=rightBounds.y+maxTop；
var rightbunds0=rightbunds.x+maxRight；
var leftBounds0=leftBounds.x-maxLeft；
extend（projection.frompointtolatng（leftBounds0，topfounds0））；
extend（projection.frompointtolatng（rightbunds0，topbunds0））；
映射边界（bounds）；
}   
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

jsfiddle中的代码非常难看，无法查看。你听说过缩进吗？：）顺便说一句，javascript代码应该放在javascript部分（左下角），您可以在HTML部分找到它。感谢Tomas的反馈。目标是使所有内容都显示在地图的边界内。单击标记会平移地图，可能会将其他标记（部分）移出视图，这是不令人满意的。

getSouthWest（）

应该是

getSouthWest（）

。然后-

InvalidValueError:在属性lat中：行
var rightBounds=
上不是一个数字。这一行似乎不知怎么地把
bounds
对象的一个子属性变成了
NaN
：那里有无限循环。有什么问题吗？我有一个像这样的长信息盒，它不能正常工作。有一只虫子。这和安德烈说的不一样。var leftBounds=projection.fromLatLngToPoint（新的google.maps.LatLng（bounds.getNorthEast（）.lat（），bounds.getSouthWest（）.lng（））；var rightBounds=projection.fromLatLngToPoint（新的google.maps.LatLng（bounds.getNorthEast（）.lat（），bounds.getNorthEast（）.lng（））；
#map-canvas { width: 100%; height: 520px; }

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'));
  var projection = null; 
  google.maps.event.addListener(map,'projection_changed', function() {
    projection = map.getProjection();
  }); 

  var bounds = new google.maps.LatLngBounds();
  if (!projection) 
    google.maps.event.addListener(map, 'idle', computeBounds);
  else 
    computeBounds();

  var myLatlng1 = new google.maps.LatLng(51.525209,-0.09402479999994284);
  bounds.extend(myLatlng1);
  var myLatlng2 = new google.maps.LatLng(51.52106840183588,-0.10866641049801729);
  bounds.extend(myLatlng2);
  //  Fit these bounds to the map
  map.fitBounds(bounds);

  function computeBounds() {    

    var contentString1 = '<div class="map-content"><p>Test1<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
    var infowindow1 = new google.maps.InfoWindow({content: contentString1});
    var marker1 = new google.maps.Marker({position: myLatlng1,map: map,title: 'Test1'});

    google.maps.event.addListener(marker1, 'click', function() {
      infowindow1.open(map,marker1);
    });
    infowindow1.open(map,marker1);
    google.maps.event.addListenerOnce(infowindow1,'domready',calcInfoWindowBounds); 

    var contentString2 = '<div class="map-content"><p><br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
    var infowindow2 = new google.maps.InfoWindow({content: contentString2});
    var marker2 = new google.maps.Marker({position: myLatlng2,map: map,title: 'Test2'});
    google.maps.event.addListener(marker2, 'click', function() {
      infowindow2.open(map,marker2);
    });
    infowindow2.open(map,marker2);

    google.maps.event.addListenerOnce(infowindow2,'domready',calcInfoWindowBounds); 

    function calcInfoWindowBounds(){
      domEls = document.getElementsByClassName('map-content');
      var markerSpace = 32+8;
      var maxTop = 0;
      var maxLeft = 0;
      var maxRight = 0;
      for (var i=0; i<domEls.length; i++) {
        var topOfWindow = domEls[i].offsetHeight + markerSpace;
        var leftOfWindow = domEls[i].offsetWidth/2;
        var rightOfWindow = domEls[i].offsetWidth/2;

        if (topOfWindow > maxTop) maxTop = topOfWindow;
        if (leftOfWindow > maxLeft) maxLeft = leftOfWindow;
        if (rightOfWindow > maxRight) maxRight = rightOfWindow;
      }

      var leftBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast().lat(),bounds.getSouththWest().lng()));
      var rightBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast()));
      var topBounds0 = rightBounds.y + maxTop;
      var rightBounds0 = rightBounds.x + maxRight;
      var leftBounds0 = leftBounds.x - maxLeft;
      bounds.extend(projection.fromPointToLatLng(leftBounds0,topBounds0));
      bounds.extend(projection.fromPointToLatLng(rightBounds0,topBounds0));
      map.fitBounds(bounds);
    }   

  }

}
google.maps.event.addDomListener(window, 'load', initialize);