javascript - 用户脚本 : Trigger Google Map resize?

Question

我正在为 GeoGuessr.com 构建用户脚本(安装在浏览器中以修改第 3 方页面的脚本) .它添加了一个按钮，允许将小猜测图扩展到全屏。

虽然我的布局没有问题，但问题是 Google map 没有调整大小:

该页面是使用 Backbone 构建的，没有用于访问任何 View 的 API，更不用说内部 Google map 对象了。

我试过了

$(window).trigger('resize');

触发窗口调整大小事件，因为我注意到当我手动执行此操作时 map 会调整大小。然而什么也没有发生(Chrome 29)。

有什么方法可以强制 Google map 在我的用户脚本中调整大小？

Answer 1

如果您调整 map 的 div 容器的大小，您还必须调整 map 对象本身的大小。如 Reference 中所述:

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize').

map 是 google.maps.Map 对象的变量名。 (我猜你只有在全局命名空间中才能访问它)。

更新:

首先，要访问由 Backbone.View.extends 构建的属性，您需要访问该类的 prototype - 在本例中为 window.gg.guessMapView.prototype。接下来我们需要指定 View 将使用的 el。因为它最初是由 Backbone View 生成的——它应该是——你无权访问它。看这个article获取更多信息。我们要做的是将现有的 html 元素附加到它，即 #guessMapContainer 元素。

window.gg.guessMapView.prototype.$el = $('#guessMapContainer')

一旦指定了一个元素，您想要重新初始化 View ，以便它再次呈现 map 。这可以通过已为 View 实现的 initialize() 方法来完成。

window.gg.guessMapView.prototype.initialize()