Google maps api 3 谷歌地图信息窗口点击事件在Meteor中重新渲染地图画布

嘿，我试图在我的MeteorJS项目中使用谷歌地图，让谷歌地图显示在所有客户的地图上，然后当你点击其中一个标记时显示一个信息窗口

问题是，无论何时单击标记，它都会从头开始重新呈现地图，我知道这和单击infoWindow时设置的会话变量的反应性有关

当会话变量发生更改时，是否有任何方法可以避免重新渲染贴图

谢谢

下面是我在项目中使用的JS和模板

{{{#常数}}
{{/常数}

用于制作谷歌地图和标记的代码

Template.customers\u map.rendered=function（）{
$（“#地图画布”）.高度（“400px”）；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（p）{
Session.set（“myLat”，p.coords.latitude）；
Session.set（“myLng”，p.coords.longitude）；
});
}
副自动运行（函数（）{
变量映射选项={
中心：新的google.maps.LatLng（Session.get（“myLat”）、Session.get（“myLng”），
缩放：15，
动物控制：对，
ZoomControl选项：{style:google.maps.ZoomControl样式.SMALL}，
街景控制：错误，
mapTypeControl:false，
scaleControl：对，
mapTypeId:google.maps.mapTypeId.SMALL
}
var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
var infowindow=new google.maps.infowindow({
内容：Template.customers\u infoWindow（）
});
Customers.find（）.forEach（函数（customer）{
如果（customer.loc！=null）{
var geo=customer.geoLocation（）；
var marker=new google.maps.marker({
位置：新的google.maps.LatLng（geo.lat，geo.lng），
标题：customer.name（），
图标：'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
marker.setMap（map）；
google.maps.event.addListener（标记'click'，函数（）{
Session.set（“customerId”，customer.\u id）；
信息窗口。打开（地图、标记）；
});
}否则{
console.log（customer.name（）+“没有地理位置”）；
};
});
});
};

infoWindow模板

{{record.name}

以及infoWindow模板的js

Template.customers\u infoWindow.record=function（）{
返回Customers.findOne（{u id:Session.get（“customerId”）}）；
}

如果我面前没有运行的版本，就有点难以确定，但我认为这基本上是因为您的所有代码都在一个大的

Deps.autorun

块中。单击其中一个标记正在更改会话变量

customerId

，这将导致

customers\u infoWindow

重新呈现（因为它显然是一个依赖项），但我确信这是预期的行为

但是，由于您在

Deps.autorun

块中声明

var infoWindow

以将该模板的实例作为其属性之一，因此我认为更改

customers\u infoWindow

实际上会使整个

Deps.autorun

计算无效，这意味着整个块将再次执行，包括

var map=new google.maps.map（…）

行，这将本质上重新呈现映射（即使它不会重新呈现包含它的实际div元素）

因此，我建议将您的代码拆分为单独的

Deps.autorun

块，并确保同一块中的任何内容都应同时重新运行-显然，这意味着Google Maps初始化代码和

infoWindow

处理程序应位于单独的块中

---

重申一下，我认为这就是正在发生的事情，但您必须尝试一下并让我知道…

如果您创建了一个全局googlemaps对象，您可以从任何地方访问它的属性。有一个很好的例子。 总的要点是：

使用initialize方法创建googlemaps类。在initialize方法的末尾，为映射的存在设置一个会话变量。（Session.set（'map'，true）；）

通过在Template.customers\u map.rendered中调用googlemap init方法，调用create创建googlemap对象

---

我刚刚尝试将代码分成两个独立的

Deps

第二个

Deps

无法读取地图选项，因为它在第一个

Deps

块中定义，并且超出了范围。如果有办法使单击不附加到地图模板，而是附加到另一个模板，可以避免重新渲染，您不能声明吗

mapOptions

变量完全位于Deps块之外，然后在Deps块中设置其值？