Question

我创建了一个小功能，它将地图（谷歌地图）放在网站上。为了构建我的代码，我使用了Revealing Module Pattern（多个映射的同一模块的多个实例）。在页面加载时，我使用AJAX加载Google Maps API，然后将click事件侦听器附加到每个标记。

我用基本代码创建了一个小提琴：http://jsfiddle.net/K9mqz/。

如果我的HTML中只有一个.map它可以正常工作，但只要我在HTML中添加第二个.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），它总是返回第二个映射。有什么建议让它发挥作用吗？

Answer 1

您所看到的行为是预期的，因为您有一个对象map的实例和您的点击处理程序。如果您不知道需要的地图数量，我建议使用数组map = [];并将map对象传递给createMarker函数createMarker( idx, data, map[0]);。希望有所帮助。

markers = [];
maps = []; //pass one instance to the function bellow
function createMarker( idx, data, map ) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng( data.lat, data.lng ),
            map: map,
            title: data.title
        });

        google.maps.event.addListener( marker, 'click', function( e ) {
            // THIS SHOULD WORK BECAUSE YOU ARE ADDING THE MARKER TO EACH MAP INSTANCE
            clickMarker( idx, data );
        });
    marker.setMap(map); //set the marker to the map instance you passed to the function 
    markers.push(marker);   //keep all the markers in one array and you can clear them easy 
}

Answer 2

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

要修复，只需修改此行：

$elCanvas,

到

$elCanvas,
$elTitle,
$elDescription,

http://jsfiddle.net/K9mqz/4/（现在存在布局问题）

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

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

2 个答案: