Google Maps Api v3, biểu tượng Cụm tùy chỉnh

Question

Tôi làm cách nào để thay đổi biểu tượng cụm? tôi wolud muốn có cùng một biểu tượng, với một số màu khác hơn màu xanh.

Answer 1

Bạn cần phải sử dụng tham số phong cách khi khởi tạo đối tượng MarkerClusterer - mã dưới đây cho thấy phong cách mặc định vì vậy nếu bạn muốn recolour một trong những biểu tượng chỉ cần thay đổi url liên quan đến hình ảnh của bạn ...

//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

Những các biểu tượng không còn trên máy chủ của Googles nữa.

Answer 3

Google đã thay đổi repo của anh ấy. Mới nhất cụm repo là: https://github.com/googlemaps/js-marker-clusterer hình ảnh: https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images

Bạn cũng có thể xem xét tải xuống nguồn và cung cấp liên kết từ đường dẫn cục bộ của bạn. Bằng cách này, bạn sẽ có quyền kiểm soát nhiều hơn các nguồn lực mà ứng dụng của bạn cần.

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

Một shortcut được trọng con đường hình ảnh như thế này:

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

Answer 5

Dưới đây là bức ảnh gốc

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);