通过单击 Google 地图上的标记打开 div 而不是信息窗口

Question

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

我希望能够在地图上单击标记时显示 () 或 fadein() 隐藏的 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"]

切换window函数是：

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

当您点击标记时出现错误：

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

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

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处理程序的函数-调用必须return一个函数( returned 函数将是处理程序）。目前该函数将 return 什么都没有，"nothing" 是错误消息中的 undefined。

所以它必须是例如：

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

通过单击 Google 地图上的标记打开 div 而不是信息窗口

Open div instead of infowindow by clicking marker on Google Maps

javascript

jquery

google-maps

SEE DEMO