javascript - 重新对齐 Google map ，使所有标记都适合 map 右侧 70% 的区域

Question

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

我组合了一个小函数来处理 map 的重新定位，以使所有标记都出现在 map 视口(viewport)中。该函数在页面加载时以及每次调整窗口大小时调用。

虽然这工作得很好，但我需要进一步微调这个脚本，而这就是我不知道如何做到这一点的地方:稍后，将会有一个永久的信息窗口覆盖左侧 30% 的内容 map 。为了防止标记隐藏在其下方，如果可以将重新对齐功能限制为仅使用 map 对象的右侧 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');
}

map 和 markers 是包含 Google map map 对象和 Google map 标记对象数组的全局变量。 resizeFinished 是一个针对最大化和捕捉窗口将阻止事件被触发的错误的小解决方法。

预先感谢您提供的任何提示!问候 - 乔纳森

P.S.:如果没有必要，请不要提供 jQuery 解决方案...

Answer 1

我可以想到解决这个问题的两种方法:

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

2. 如果 1. 不可行，您可以创建一个假边界元素，该元素位于计算边界左侧适当的距离 ti 内。例如。你原来的边界框 lng从 50 开始并以 70 结尾。这意味着它的宽度是20，20*0.3=6所以你会在 lng 50-6= 44 创建一个假元素并将 map 适应这些新边界。所以你的代码看起来像这样(未经测试):

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');
}

当然，如果您的标记覆盖更大的lng，这将不起作用。跨度超过整个地球的 70%。

编辑编辑了当bounds.getSouthWest().lng()>bounds.getNorthEast().lng()时工作的代码