2012-08-15 48 views
0

我有一个使用Google Maps Utility Library v3的Google Maps实施(http://google-maps-utility-library-v3.googlecode.com/svn/ trunk/markerclusterer/docs/reference.html)用于聚类标记。它完美的作品。获取infowindow以在聚集标记集中点击正常标记时显示

现在虽然我想将infowindows添加到标记中。群集标记正常工作,所以我想保留这些行为(即,当它们点击它们时放大),但是当单击标准单个标记时,我想显示一个infowindow。

完整的代码如下:

var _iconCenter = new google.maps.MarkerImage('/css/img/map-marker.png', 
    new google.maps.Size(38, 48), 
    new google.maps.Point(0,0), 
    new google.maps.Point(19, 44)); 

var shadow = new google.maps.MarkerImage('/css/img/map-marker-shadow.png', 
    new google.maps.Size(57, 49), 
    new google.maps.Point(0,0), 
    new google.maps.Point(7, 44)); 

var _icon = '/css/img/map-marker-purple.png'; 
var infowindow; 
var markersArray = []; 
var map; 
var currentPosition = 0; 
var currentmarker; 
var firstload = true; 
var maploaded = false; 
var interval = 5000; 
var geocoder; 

var stylez = []; 


function initialize(items,loop,zoom) { 
    geocoder = new google.maps.Geocoder(); 
    if (items.length > 0) { 
    var latlng = new google.maps.LatLng(items[0].Lat, items[0].Lng); 
    var myOptions = { 
     zoom: zoom, 
     center: latlng, 
     //mapTypeControl: false, 
     streetViewControl: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map"), myOptions); 
    map.setOptions({styles: stylez}); 

    for (var i = 0; i < items.length; i++) { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(items[i].Lat, items[i].Lng), 
     title: items[i].Title, 
     icon: _icon, 
     shadow: shadow, 
     infocontent: items[i].Description 
     }); 
     marker.setMap(map); 
     markersArray.push(marker); 
    } 


    //set style options for marker clusters (these are the default styles) 
    mcOptions = { 
     gridSize: 44 
    } 

    var markerCluster = new MarkerClusterer(map, markersArray, mcOptions); 
    google.maps.event.addListener(map, "tilesloaded", function() { 
     if(loop == true){ 
     SetLoop(); 
     } 
    }); 

    google.maps.event.addListener(marker, "click", function() { 
     alert('test'); 
     //infowindow.setContent('test'); 
     //infowindow.open(map,this); 
    }); 

    } 
} 


function SetLoop() { 
//This will fire everytime map loads or recenteres 
    maploaded = true; 
    if (firstload) { 
    firstload = false; 
    Recenter(); 
    } 
} 

function Recenter() { 
    //If previous iteration is not loaded completely, wait to avoid errors 
    //It could happen for slow internet connection 
    if (maploaded) { 
    maploaded = false; 
    } else { 
    //keep adding 1 second to interval for slow connection till page loads 
    interval = interval + 1; 
    setTimeout("Recenter()", interval); 
    return; 
    } 

    if (infowindow != null && currentmarker != null) { 
    //currentmarker.icon = _icon; 
    currentmarker.icon = _iconCenter; 
    currentmarker.setMap(map); 
    infowindow.close(map, currentmarker); 
    } 

    markersArray[currentPosition].icon = _iconCenter; 
    markersArray[currentPosition].setMap(map); 
    map.setCenter(new google.maps.LatLng(markersArray[currentPosition].getPosition().lat(), markersArray[currentPosition].getPosition().lng())); 

    infowindow = new google.maps.InfoWindow({ 
    content: markersArray[currentPosition].infocontent, 
    size: new google.maps.Size(50, 50) 
    }); 
    infowindow.open(map, markersArray[currentPosition]); 
    currentmarker = markersArray[currentPosition]; 
    if (currentPosition >= markersArray.length - 1) { 
    currentPosition = 0; 
    } else { 
    currentPosition++; 
    } 
    if (markersArray.length > 1) { 
    setTimeout("Recenter()", interval); 
    } 
} 

正如你所看到的,仅用于演示目的,我呼吁标记点击收听粗警报事件,但它不点火的。当我点击普通标记并且浏览器的开发人员工具控制台中没有错误时,什么都不会发生。我想知道这是否与另一个事件监听地图加载有关,但我处于我对此的理解边缘,并且没有任何错误,我正在努力知道如何调试它。

任何人都可以点我正确的方向来使此工作?

谢谢大家!

回答

2

我认为问题在于在添加事件侦听器之前将标记交给clusterer。尝试添加侦听器一旦创建标记,以便当您将markersArray传递给聚合器时,事件排列器已经连接。 因此,尝试:

for (var i = 0; i < items.length; i++) { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(items[i].Lat, items[i].Lng), 
     title: items[i].Title, 
     icon: _icon, 
     shadow: shadow, 
     infocontent: items[i].Description 
     }); 
     marker.setMap(map); 

     //attach the listener now, before pushing into the array 
     attachListener(marker,'marker:'+i); 
     markersArray.push(marker); 
    } 

然后:

function attachListener(marker,content){ 
     google.maps.event.addListener(marker, "click", function() { 
//  alert('test'); 
     infowindow.setContent(content); 
     infowindow.open(map,this); 
     }); 

    } 
+0

谢谢 - 这就是诀窍。我唯一不得不将'var infowindow = new google.maps.InfoWindow();'添加到该函数中,以便识别出'infowindow'。 – Dan 2012-08-15 18:23:02

+0

如果你在全局声明infowindow,那么你将只有一个infowindow(默认的v2行为),如果你把它放在函数中,你会为每个标记得到一个,并且必须手动关闭它们。 – geocodezip 2012-08-23 03:35:36

相关问题