google映射信息泡动态内容，在第一个标记点上没有加载

Question

我试图在谷歌地图信息泡中添加动态内容

• 首先单击一个空的信息泡。
• 在第二次单击标记的上，加载正确的内容

根据这个答案，我使用前面定义的信息泡对象上的domready事件来启动加载动态内容的函数。

...although JS篡改这个答案是误导性的，因为“动态”内容实际上是在domready之前使用new InfoBubble()调用的content选项加载的

在控制台中，我得到了所有正确的信号，即domready功能正在完成，并且在第一次标记单击时就正确地找到了内容。

试过：

• 查看infobubble.js码并将console.logs放在第1231行的两边： google.maps.event.trigger(this, 'domready'); 结果表明，domready确实是在动态函数启动之前触发的。
• 使用信息泡沫disableAnimation: true选项禁用动画--认为这可能会在domready被调用后减缓信息泡加载--但它没有工作
• 增加了3秒的setTimeout()，但这似乎没有帮助.不管怎么说，这都是一次糟糕的黑客攻击。

如何在第一次单击标记时加载动态内容?

JS Fiddle

备注：

• 在js小提琴示例中，我使用了一个$.get()调用--因为在我的应用程序中，我使用胡子将模板加载到信息泡沫中
• 正在加载的示例内容与$.get()调用无关(是的，如果不使用$.get()调用，我也可以实现相同的目标)，但我只是尝试对自己的应用程序使用类似的代码布局+计时

Answer 1

多亏了在Dr.Molle的回答中的观察，我找到了解决方案--这确实与domready事件触发器在infobubble.js代码中的放置有关。

不幸的是，它目前位于updateContent_()函数中，这是open_()在调用setMap()之前调用的--这意味着domready是在infoBubble添加到DOM之前触发的。

在domready函数中的setMap()调用之后添加setMap()触发器是不可能的，因为setMap()是异步的.而且setMap()函数没有特定的回调。

但是，根据OverlayView文档 (这个插件正在使用的)，在使用有效的map对象调用setMap()之后，setMap()函数调用onAdd()函数一次：

onAdd()：实现此方法来初始化覆盖DOM元素。在使用有效映射调用setMap()之后，将调用该方法一次。此时，窗格和投影将被初始化。

更简单的是：

在onAdd()方法中，您应该创建DOM对象，并将它们作为窗格的子对象追加。

因此，在将domready附加到映射窗格之后，我们应该在onAdd()函数中触发infoBubble事件：

/**
 * On Adding the InfoBubble to a map
 * Implementing the OverlayView interface
 */
InfoBubble.prototype.onAdd = function() {
  if (!this.bubble_) {
    this.buildDom_();
  }

  this.addEvents_();

  var panes = this.getPanes();
  if (panes) {
    panes.floatPane.appendChild(this.bubble_);
    panes.floatShadow.appendChild(this.bubbleShadow_);
  }
  google.maps.event.trigger(this, 'domready');    // infobubble has now been added to DOM so we can fire `domready`
};

我为谷歌创建了一个拉请求来更新infobubble.js代码并修复这个问题。

JS在这里使用更新的代码(关于新的domready放置，请参见javascript窗口中的第910行)

http://jsfiddle.net/goredwards/7r96we66/

备注：

• 在旧的domready调用时，我在jsfiddle中添加了时间戳，并添加了正确的(更新的) domready调用--您将在console.log中看到它们--在我的系统上将达到大约20 my (随系统速度的不同而变化)
• 这表明旧的domready确实是在infoBubble被附加到窗格之前启动的。
• 这给出了在setTimeout调用中放置任何函数所需的最小domready的概念

如果您想使用原始代码而不使用修复程序-和setTimeout hack：http://jsfiddle.net/goredwards/xeL7dxye/

...you可以玩setTimeout的持续时间，看看最小值是多少--我在一台快速机器上降到了大约5毫秒。显然，在生产代码中，您必须采用另一种方法来对付最慢的机器(即您将setTimeout持续时间设置在可以忍受的最大水平-无需烦扰-150到250 at -以覆盖最慢的系统)。

..。或者您只需复制和更新infobubble.js代码并完成它。

Answer 2

问题似乎是信息泡沫的open_-method (这将在open-method中被称为)：

InfoBubble.prototype.open_ = function(opt_map, opt_anchor) {
  this.updateContent_();

  if (opt_map) {
    this.setMap(opt_map);
  }
  //............................
}

它首先调用方法updateContent_ ( domready-event将在其中被触发)，然后设置map。但是在设置map-property之前不会将覆盖添加到地图中，内容是尚未附加到文档的DocumentFragment/Node，因此jQuery可能找不到它。

可能的解决办法：

使用信息泡的content_-property作为jQuery选择器的上下文，那么内容是否已经附加到文档中并不重要。

google.maps.event.addListener(marker, 'click', function () {

  google.maps.event.addListenerOnce(infoBubble,'domready',function () {

    var that=this;            
    //when we load the additional content asynchronously, 
    //make sure that it's the correct content we are loading
    var token=new Date().getTime()*Math.random();
    that.set('token',token);

    $.get('https://lh4.googleusercontent.com/-_Cox6aEnSkU/UQ_B0LK4khI/AAAAAAAAAzw/4H4dsWGPgeE/s150/go-button.png', function (myImage) {
      if(that.get('token')===token){
        $(".dialog",that.content_).html('<img id="theImg" src="https://goo.gl/phmzis" />');
      }     
        })

  });
  infoBubble.open(map, marker);
});

http://jsfiddle.net/doktormolle/aLtz76ym/