根据媒体查询处理不同的谷歌地图中心(Handle different google maps center depending on media query)

根据媒体查询处理不同的谷歌地图中心(Handle different google maps center depending on media query)

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

平板电脑/桌面版

手机版

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

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

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

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

This is probably really simple to do, I am just not sure how to handle it currently. I am building a site using Foundation 5 as responsive framework and in the footer section there's a map. In the tablet and desktop versions the contact form is positioned over the map with the map visible on both sides of the form element. The mobile version has the map first and the contact form afterwards. To put it graphically it's something like that.

Tablet/Desktop Version

Mobile Version

So, now, in terms of responsiveness what I would normally do to keep the map centered is use:

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

Now that would work OK if the map's center was actually the map's center, but as you can see in the examples, the map center in the Tablet/Desktop version is a little to the East of the Marker and in the Mobile Version the Center and the Marker share position.

Is there any way to use the resize event listener with different coordinates depending on media query or window size?

最满意答案

使用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/

Use matchMedia to determine each case:

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

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

Also, resize is one of those events that can fire VERY rapidly. You may want to consider throttling that event: http://ejohn.org/blog/learning-from-twitter/