Question

我有一个全屏Google地图，底部有一个小div来保存打开和关闭标记的图像。我还有一个隐藏的div，它包含每个标记的信息（通常会出现在infowindow中）。

我希望能够在地图上单击标记时显示（）或淡化（）隐藏的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');
};
};

当您点击标记时，我收到错误：

未捕获的TypeError：无法读取未定义的属性'apply'（main.js：17）

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

Fiddle

Answer 1

函数 - 调用已被用作click - 处理程序必须返回一个函数（返回的函数将是处理函数）。目前该功能不会返回任何内容，并且＆＃34;没有＆＃34;是错误消息中的undefined。

所以它必须是例如：

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

SEE DEMO

Answer 2

你的匿名函数关闭有问题。如果我使用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

点击谷歌地图上的标记，打开div而不是infowindow

2 个答案:

SEE DEMO