javascript - 谷歌地图和揭示模块模式——上下文

Question

我创建了一个小功能，将 map (Google Maps) 放在网站上。为了稍微构建我的代码，我使用了 Revealing Module Pattern(同一模块的多个实例用于多个映射)。在页面加载时，我使用 AJAX 加载 Google Maps API，然后将点击事件监听器附加到每个标记。

我用基本代码创建了一个 fiddle :http://jsfiddle.net/K9mqz/ .

如果我的 HTML 中只有一个 .map 它工作得很好，但是一旦我在我的 HTML 中放入第二个 .map 然后我点击一个第一张 map 中的标记，内容将显示在第二张 map 中。我不确定，但我认为损坏的部分是我的 Google Maps API 事件监听器中的部分:

google.maps.event.addListener( marker[ idx ], 'click', function( e ) {
       // Doesn't refer to the right instance of the module. Instead it uses the last instances all the time, even if i click a marker on the first map.
       clickMarker( idx, data );
});

如果我在 clickMarker 函数中放置一个 console.log($el)，它总是返回第二张 map 。有什么建议可以让它发挥作用吗？

Answer 1

您从未定义过 $elTitle 和 $elDescription，因此，当您设置它们时，它们是在 window 上全局设置的。第二次调用覆盖了第一次调用中设置的值。

要修复，只需修改这一行:

$elCanvas,

到

$elCanvas,
$elTitle,
$elDescription,

http://jsfiddle.net/K9mqz/4/ (现在有布局问题)

我通过在 openOverlay 方法中设置断点并检查可用变量来发现这一点。我最初没有看到 $elTitle，所以我开始挖掘，直到我在 window 上找到它。