通过单击 Google 地图上的标记打开 div 而不是 infowindow

Question

我有一个全屏谷歌地图，底部有一个小 div，用于保存打开和关闭标记的图像。我还有一个隐藏的 div，其中包含每个标记的信息（通常会出现在信息窗口中）。

我希望能够在地图上单击标记时显示（）或淡入（）隐藏的 div。这就是我添加标记的方式。

for (i = 0; i < locations.length; i++) {
var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][2]),
icon: icons[locations[i][4]].icon,
map: map,
id: locations[i][3],
type: locations[i][4]
});
markerGroups[locations[i][4]].push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
toggleWindow(marker.id);
})(marker, i));
bounds.extend(myLatLng);
}
if (locations.length > 0){
map.fitBounds(bounds);
}

数组中的每个位置如下所示： ["1.50 英寸", 37.5, -77.33, 0, "hail150"]

切换窗口功能是：

function toggleWindow(id){
var godiv = '#sr'+id;
if ($(godiv).css('display') == 'block') {
$(godiv).css('display', 'none');
}
else {
$("#reportframe").children().hide(); 
$(godiv).css('display', 'block');
};
};

当你点击一个标记时，我得到一个错误：

未捕获的类型错误：无法读取未定义的属性“应用”(main.js:17)

我已经尝试了几种不同的方法，但似乎 ID 不匹配或 GMaps 无法访问 var。

Fiddle

Answer 1

您的匿名函数闭包有问题。如果我使用 createMarker 函数来创建闭包，它对我有用。

function createMarker(location) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(location[1], location[2]),
        icon: icons[location[4]].icon,
        map: map,
        id: location[3],
        type: location[4]
    });
    markerGroups[location[4]].push(marker);
    google.maps.event.addListener(marker, 'click', function () {
        var godiv = '#sr' + marker.id;
        if ($(godiv).css('display') == 'block') {
            $(godiv).css('display', 'none');
        } else {
            $("#reportframe").children().hide();
            $(godiv).css('display', 'block');
        }
    });
  return marker;
}

像这样使用它：

// add markers
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var marker, i;

for (i = 0; i < locations.length; i++) {
  var marker = createMarker(locations[i]);
  bounds.extend(marker.getPosition());
}

working fiddle

Answer 2

已用作click-handler 的函数-调用必须返回一个函数（返回的函数将是处理程序）。目前该函数不会返回任何内容，“nothing”是错误消息中的undefined。

所以它必须是例如：

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function(){toggleWindow(marker.id);}
})(marker, i));

SEE DEMO