重新调整谷歌地图，将所有标记放在地图右侧70%的位置

Question

我想为客户提供一个在地图上显示一个城市的所有分支机构的解决方案(Google Maps JavaScript API)。该地图的行为更像是一个网站内应用程序，而不是典型的谷歌地图——它不可拖动、缩放等等

我组合了一个小函数，用于处理地图的重新定位，以便在地图视口中显示所有标记。此函数在页面加载时调用，每次调整窗口大小时都调用。

虽然这很完美，但我需要对这个脚本进行更多的微调，而这正是我不知道如何做到的地方：稍后，将有一个永久的信息窗口覆盖地图的左30%。为了防止标记隐藏在它下面，如果重新对齐功能可以被限制为仅使用地图对象的正确70%进行计算，那就太好了。

以下是功能当前的样子：

function realignMap() {
resizeFinished(function(){
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);
}, 300, 'mapresizeuniqueid');
}

地图和标记是全局变量，包含谷歌地图地图对象和一个数组谷歌地图标记对象resizeFinished是针对一个错误的小解决方案，其中窗口的最大化和捕捉将防止事件被触发。

提前感谢您提供的任何小费！问候语-乔纳森·

附言：如果没有必要，请不要提供jQuery解决方案。。。

Answer 1

我可以想出两种解决这个问题的方法：

1.将mapdiv缩小到实际需要的大小。为什么在地图上显示div？当信息窗口出现时，为什么不缩小mapdiv？然后在信息窗口不存在时将其重新调整大小(注意：在执行任何这些操作后，在地图上触发resize事件)。如果您没有实际理由这样做，我建议您使用此解决方案。

2.如果1。这是不可行的，因为您可以创建一个假边界元素，该元素将在距离计算边界的左侧适当距离ti处。例如，您的原始边界框lng从50开始，到70结束。这意味着它的宽度是20，20*0.3=6，所以您可以在lng50-6=44处创建一个伪元素，并将贴图拟合到这些新边界中。所以你的代码看起来像这样(未经测试)：

function realignMap() {
resizeFinished(function(){
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
var width = bounds.getSouthWest().lng() > bounds.getNorthEast().lng() ? (180 - bounds.getSouthWest().lng()) + (bounds.getNorthEast().lng() - (-180)) : bounds.getSouthWest().lng() - bounds.getNorthEast().lng();
if(width > 180);
var new_lng = bounds.getSouthWest().lng() - (width * 0.3);
if(new_lng < -180) new_lng = 180 - (-180 - new_lng);
bounds.extend(new google.maps.LatLng(bounds.getCenter().lat(), new_lng);
map.fitBounds(bounds);
}, 300, 'mapresizeuniqueid');
}

当然，如果你的标记覆盖了比整个地球70%更大的lng跨度，这是行不通的。

编辑编辑代码以在bounds.getSouthWest(.lng)>bounds.getNorthEast(.lng()时工作