Google Maps Api v3, пользовательский значок кластера

Question

Как я могу изменить значок кластера? Мне нравится иметь такой же значок, с другим цветом, чем синий.

Answer 1

Вы должны использовать параметр стилей при инициализации объекта MarkerClusterer - ниже код показывает стили по умолчанию, так что если вы хотите перекрасить одну из иконок просто изменить соответствующий URL к изображению ...

//set style options for marker clusters (these are the default styles) 
mcOptions = {styles: [{ 
height: 53, 
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png", 
width: 53 
}, 
{ 
height: 56, 
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png", 
width: 56 
}, 
{ 
height: 66, 
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png", 
width: 66 
}, 
{ 
height: 78, 
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png", 
width: 78 
}, 
{ 
height: 90, 
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png", 
width: 90 
}]} 

//init clusterer with your options 
var mc = new MarkerClusterer(map, markers, mcOptions); 

Answer 2

Эти иконки больше не находятся на серверах Googles.

Answer 3

Google изменил свое репо. Последний репозиторий кластера: https://github.com/googlemaps/js-marker-clusterer images: https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images

Вы также можете рассмотреть возможность загрузки источника и ссылки на ваш локальный путь. Таким образом, у вас будет больше возможностей для управления ресурсами, которые необходимы вашему приложению.

local_path "/pucblic/" 
mcOptions = {styles: [{ 
height: 53, 
url: local_path+"m1.png", 
width: 53 
}, 
{ 
height: 56, 
url: local_path+"m2.png", 
width: 56 
}, 
{ 
height: 66, 
url: local_path+"m3.png", 
width: 66 
}, 
{ 
height: 78, 
url: local_path+"m4.png", 
width: 78 
}, 
{ 
height: 90, 
url: local_path+"m5.png", 
width: 90 
}]} 

Answer 4

Ярлык является отменяя путь к изображению, как это:

MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = 
    "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"; 

Answer 5

Вот оригинальные фотографии

markerClusterOptions = {styles: [{ 
    height: 53, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png", 
    width: 53 
    }, 
    { 
    height: 56, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m2.png", 
    width: 56 
    }, 
    { 
    height: 66, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m3.png", 
    width: 66 
    }, 
    { 
    height: 78, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m4.png", 
    width: 78 
    }, 
    { 
    height: 90, 
    url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m5.png, 
    width: 90 
    }]} 
    markerCluster = new MarkerClusterer(map, markers,markerClusterOptions);