实例化时，Google Map元素是否必须位于DOM中？ [英] Does a Google Map element have to be in the DOM when instantiating?

问题描述

我实例化一个Google Map对象，如下所示：

  this.map = new google.maps.Map（this。 el，{
 center：new google.maps.LatLng（this.lat，this.lng），
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 zoom：this.zoom 
}）; 
  

其中 this.el 是创建的对象通过 document.createElement（'div'）但尚未插入到DOM中。当我后来追加 this.el 到DOM时，我得到一张看起来像这样的地图（注意所有奇怪的灰色空间）：

http://cl.ly/3B3z1e3g2h1U301r0X1R

我没有这个问题，但是，如果我先将 this.el 附加到DOM，然后实例化映射对象。有没有办法创建地图然后追加它？这将大大简化我的一些地图代码（我在Backbone.js视图中使用了这个）。

谢谢。

-Scott

解决方案

在将this.el追加到DOM后，您必须调用google.maps.event。触发器（this.map，'调整大小'）;

I am instantiating a Google Map object like so:

this.map = new google.maps.Map(this.el, {
    center: new google.maps.LatLng(this.lat, this.lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: this.zoom
});

Where this.el is an object created via document.createElement('div') but has not yet been inserted into the DOM. When I later append this.el to the DOM I get a map that looks like this (note all the weird gray space):

http://cl.ly/3B3z1e3g2h1U301r0X1R

I do not have this problem, though, if I first append this.el to the DOM and then instantiate the map object. Is there a way to create the map and then append it? This would greatly simplify some of my map code (I am using this in Backbone.js views).

Thanks.

-Scott

解决方案

After you append this.el to the DOM, you have to call google.maps.event.trigger(this.map, 'resize');

这篇关于实例化时，Google Map元素是否必须位于DOM中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！