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

Question

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

平板电脑/桌面版

移动版

所以，现在，就响应性而言，我通常会采用以下方式来保持地图居中：

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

现在如果地图的中心实际上是地图的中心就可以了，但正如您在示例中看到的那样，平板电脑/桌面版中的地图中心位于标记的东边和移动版本中中心和标记共享位置。

有没有办法根据媒体查询或窗口大小使用不同坐标的resize事件监听器？

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/