Google Maps with Meteor和一个反应性InfoWindow [英] Google Maps with Meteor and a reactive InfoWindow

问题描述

我有一个目前正在处理的流星的Google Maps API v3应用程序。当一个人点击一个标记时，它会显示一个窗口创建时间为静态内容的infoWindow。

我想要做的是使用反应模板渲染infoWindow的内容，直接作为可以改变的HTML或通过引用被动地更新的dom元素。

我已验证如果使用infoWindow来引用DOM元素，并且该元素的内容发生变化时，Maps API会正确更新屏幕上的窗口。但是，我遇到了两个问题：

（1）关闭窗口会破坏DOM元素，因此必须重新创建。这可能很容易处理如果它存在更新它，否则创建它，插入它，并更新它过程。
（2）UI.render似乎不是动态的，因此创建它，插入它并更新它比感觉应该更难。

解决方案

我还是一个中级流星黑客，所以请原谅我。对于＃1，创建一个克隆： content：$（'。stats'）。clone（）[0]
对于＃2，您需要创建一个依赖项。文档在解释它和解释它方面做得很好。在不知道您的反应性数据源催化剂的情况下，我不能提供太多的帮助（我假设这是例子中的Session var）。噢，如果它基于集合中的新条目，请查看 .observe（）函数。

  Template.name.created = function（）{
 Session.set（'stats'，10）; 
 statsDep = new Deps.Dependency（）; 
}; 
  

---

  statsDep 。依靠（）; 
 var dropWindow = new google.maps.InfoWindow（{
 content：$（'。stats'）。clone（）[0] 
}）; 
  

---

  statsDep .changed（）; 
  

I have a google maps API v3 application for meteor that I'm currently working on. When a person clicks on a marker, it shows an infoWindow with some at-window-creation time static content.

What I would like to do is use a reactive template to render the infoWindow's contents, either directly as HTML which can change or by referring to a dom element that updates reactively.

I've verified that if I use an infoWindow to refer to a DOM element, and that element's contents change, the Maps API updates the on-screen window properly. However, I am having problems with two issues:

(1) Closing the window destroys the DOM element, so it would have to be re-created. This is possibly easy enough to handle with a "if it exists update it, else create it, insert it, and update it" process. (2) UI.render doesn't appear to be dynamic, so creating it, inserting it, and updating it is harder than it feels like it should be.

I am still an intermediate Meteor hacker, so forgive me if I'm making this too hard on myself.

解决方案

For #1, make a clone: content: $('.stats').clone()[0] For #2, you'll need to create a dependency. The docs do a pretty good job of explaining it & without knowing your reactive data source catalyst I can't help too much more (I assume it's a Session var in the example). Oh, and if it's based on new entries from a collection, check out the .observe() function.

Template.name.created = function() {
  Session.set('stats',10);
  statsDep = new Deps.Dependency();
};

---

statsDep.depend();
var dropWindow = new google.maps.InfoWindow({
  content: $('.stats').clone()[0]
});

---

statsDep.changed();

这篇关于Google Maps with Meteor和一个反应性InfoWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！