根据媒体查询处理不同的 google 地图中心

Question

这可能真的很简单，我只是不确定目前如何处理它。我正在使用 Foundation 5 作为响应式框架构建一个站点，在页脚部分有一张地图。在平板电脑和桌面版本中，联系表单位于地图上方，地图在表单元素的两侧都可见。移动版本首先有地图，然后是联系表。形象地说，就是这样。

Tablet/Desktop版本

手机版

所以，现在，就响应能力而言，我通常会使用以下方法来保持地图居中：

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(new google.maps.LatLng(lat,lng));
});

现在，如果地图的中心实际上是地图的中心，那将可以正常工作，但正如您在示例中看到的那样，Tablet/Desktop 版本中的地图中心稍微偏向标记的东边，在移动版中，中心和标记共享位置。

有什么方法可以根据媒体查询或 window 大小使用不同坐标的调整大小事件侦听器？

Answer 1

使用matchMedia判断每个案例：

google.maps.event.addDomListener(window, 'resize', function() {
  var latLng;
  if (window.matchMedia("(min-width: 400px)").matches) {
    latLng = new google.maps.LatLng(bigLat,bigLng);
  } else {
    latLng = new google.maps.LatLng(smallLat,smallLng);
  }
  map.setCenter(latLng);
});

见https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

此外，resize 是可以非常快速触发的事件之一。您可能需要考虑限制该事件：http://ejohn.org/blog/learning-from-twitter/

根据媒体查询处理不同的 google 地图中心

Handle different google maps center depending on media query

google-maps

google-maps-api-3

responsiveness