InfoWindow 使用 markerclusterers 显示不同标记的相同内容

Question

我在下面的代码中找不到错误，但它为所有信息窗口显示了相同的内容。

$('#map').gmap({'zoom': 2, 'disableDefaultUI':true}).bind('init', function(evt, map) { 
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    var image = 'http://localhost/images/dot.png';
    for ( var i = 0; i < len; i++ ) {

        boxText.innerHTML = '<div id="content" style="margin-left:2px; font-weight:bold; margin-top:1px;overflow:hidden;">'+
                        '<div id="bodyContent" style="font-weight:bold;">'+
                        '<div style="font:10px verdana;color:#375A9E; margin-left:2px;font-weight:bold;">' +
                        '<a href="' + locations[i][5] + '" target="_blank">' + locations[i][0] + '</a><div>' +
                        '</div>';
                boxText1.innerHTML ='<div id="content" class="map_rightclick" style="margin-left:10px; font-weight:bold; margin-top:1px;overflow:hidden;">'+
                        '<div id="bodyContent" style="font-weight:bold;">'+
                        '<div style="font:10px verdana;color:red; margin-left:2px;">' +
                        '<a href="' + locations[i][5] + '" target="_blank" style="font-weight:bold;">' + locations[i][0] + '</a><div>' +
                        '<br><b>City:</b><span style="color:black;">' + locations[i][3] +'</span>'+
                   '</div>';                       
        $('#map').gmap('addMarker', { 
            'position': new google.maps.LatLng(locations[i][1], locations[i][2]),
            'icon': image
        }).click(function() {
            $('#map').gmap('openInfoWindow', { content : boxText }, this);
        }).rightclick(function(){
          $('#map').gmap('openInfoWindow', { content : boxText1 }, this);
                  }).mouseover(function(){
          $('#map').gmap('openInfoWindow', { content : boxText }, this);
          }).mouseout(function(){
          $('#map').gmap('closeInfoWindow',this);
          });
    }
    $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
    // To call methods in MarkerClusterer simply call 
    // $('#map_canvas').gmap('get', 'MarkerClusterer').callingSomeMethod();
});

Answer 1

看起来您正在将点击处理程序和信息窗口内容附加到地图本身，而不是标记（并且您正在附加它len 次！）。

    $('#map').gmap('addMarker', { 
        'position': new google.maps.LatLng(locations[i][1], locations[i][2]),
        'icon': image
    }).click(function() {
        $('#map').gmap('openInfoWindow', { content : boxText }, this);
    })

信息窗口内容将仅包含 for 循环中最后一项的内容。

您希望将信息窗口的内容与标记相关联。您需要在“addMarker”的回调中执行此操作。

看起来您正在使用 jquery.ui 的地图插件。看看这个例子：http://code.google.com/p/jquery-ui-map/wiki/Examples#Example_addInfoWindow