2014-09-30 63 views
0

所以我在使用gmaps.js和gmaps.js以及marker clusterer。在我的情况下,我可能有多个标记具有完全相同的位置,但实际上代表不同的数据。为了克服这个问题,我试图实施solution found here on SO - 特别是Nathan Colgate的解决方案。GoogleMaps - 带群集和多群集解决方案的gmaps.js

这个想法是当最大变焦达到集群时它将执行multiChoice函数。我有这部分工作。我无法工作的是显示具有该功能的infoWindow。

我的目标是在此群集上显示的信息窗口点击来显示各标志(信息特别是每个标记的信息窗口的内容(这将有额外的细节具体到它)

JS:

//create the map 
var map = new GMaps({ 
    el: '#map_canvas_main', 
    lat: response.results[0].lat, 
    lng: response.results[0].lng, 
    zoom: 5, 
    maxZoom: 15, 
    panControl: false, 
    markerClusterer: function(map) { 
     markerCluster = new MarkerClusterer(map, [], { 
      title: 'Location Cluster', 
      maxZoom: 15 
     }); 

     // onClick OVERRIDE 
     markerCluster.onClick = function(clickedClusterIcon) { 
      return multiChoice(clickedClusterIcon.cluster_); 
     } 

     return markerCluster; 
    } 
}); 

//loop through array 
for(var i = 0; i < response.results.length; i++) 
{ 
    //create marker image 
    var markerLoc = { 
     url: '/custom/plugins/gmaps/images/marker-red.png', 
     size: new google.maps.Size(24, 30), //size 
     origin: new google.maps.Point(0, 0), //origin point 
     anchor: google.maps.Point(9, 30) // offset point 
    }; 

    //add marker 
    map.addMarker({ 
     lat: response.results[i].lat, 
     lng: response.results[i].lng, 
     icon: markerLoc, 
     title: response.results[i].ip_address, 
     infoWindow: { 
      content: '<p>'+response.results[i].ip_address+'</p>' 
      //add more details later 
     } 
    }); 
} 

//cluster function to do stuff 
function multiChoice(clickedCluster) 
{ 
    //clusters markers  
    var markers = clickedCluster.getMarkers(); 

    //console check 
    console.log(clickedCluster); 
    console.log(markers); 

    if (markers.length > 1) 
    {   
     //content of info window 
     var infowindow = new google.maps.InfoWindow({ 
      content: ''+ 
       '<p>'+markers.length+' = length</p>'+ 
       '<p>testing blah blah</p>' 
     }); 

     //show the window 
     //infowindow.open(??????????); 

     return false; 
    } 
    return true; 
}; 

回答

0

终于想出了这个问题,现在它变得更有意义了,但是之前没有,这是新的'显示'功能可以被OP中的替代,当然,还需要进行其他一些更改......在新的信息窗口中显示所有群集标记数据例如,但这是让窗口工作的要点。

//集群功能做的东西 功能multiChoice(clickedCluster) { //簇标记
变种标记= clickedCluster.getMarkers();

if (markers.length > 1) 
{ 
    //create the info window 
    var infoWindow = new google.maps.InfoWindow({ 
     content: ''+ 
      '<p>'+markers.length+' = length</p>'+ 
      '<p>testing blah blah</p>', 
     position: clickedCluster.center_ 
    }); 

    //display the infowindow 
    infoWindow.open(clickedCluster.map_); 

    return false; 
} 
return true; 

};