我如何更改集羣圖標?我wolud喜歡有相同的圖標,其他顏色不是藍色。Google Maps Api v3,自定義集羣圖標
回答
你需要初始化MarkerClusterer對象時使用樣式參數 - 下面的代碼顯示了默認樣式,所以如果你想recolour的一個圖標只是改變了相關網址,以你的形象......
//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);
這些圖標不再在谷歌服務器上。
他們改變回購git樞紐這裏是icone https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images – jayesh 2016-05-12 12:00:54
@Kaippally我已經在以下SO帖子中介紹了這個解決方案[google markerclusterer.js庫的備用源路徑是什麼?](http://stackoverflow.com/a/37183674/1301937) – 2016-05-12 20:28:16
谷歌改變了他的回購。最新的羣集回購是:https://github.com/googlemaps/js-marker-clusterer 圖像: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
}]}
快捷方式是壓倒像這樣的圖像路徑:
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ =
"https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m";
上面的圖像路徑不正確https://raw.githubusercontent.com/googlemaps/v3-實用程序庫/主/ markerclustererplus /圖像/ m1.png – 2016-05-29 03:49:41
真棒解決方案,只需使用本地路徑,而不是原始github內容url。 – phaberest 2016-11-17 14:38:55
這裏是原始照片
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);
- 1. Google Maps Api v3,自制集羣圖標
- 2. Google Maps Api v3 - 如何刪除羣集圖標?
- 3. Google Maps API v3自定義按鈕
- 4. Google Maps API v3 - 自定義多色圖標
- 5. Google Chrome中的Google Maps API v3自定義光標的熱點
- 6. Google Maps Api v3自定義InfoWindow - 「google未定義」錯誤
- 7. Google Maps Api v3自定義InfoWindow - 「google未定義」錯誤
- 8. Google Maps API v3街景「google未定義」
- 9. Google Maps API v3自定義動畫標記
- 10. Google Maps API v3 - 自定義行車路線標記
- 11. Google Maps v3 API和WordPress ACF:多個自定義標記
- 12. Google Maps Api標記羣集激活?
- 13. Google Maps V3自定義工具提示
- 14. Google Maps API v3:地形地圖的自定義樣式
- 15. 帶Google Adsense的Google Maps API V3自定義控件?
- 16. react-google-maps自定義標記圖標
- 17. Google Maps API v2 vs Google Maps API v3?
- 18. 使用縮放調整自定義圖像標記大小 - Google Maps API v3
- 19. Google Maps API v3 BrowserIsCompatible
- 20. Google Maps API v3 - maxZoomService
- 21. Google Maps API V3:fromContainerPixelToLatLng
- 22. Google Maps Javascript v3自定義控件子類標準控件
- 23. Google Maps API v3標記座標
- 24. Google Maps API NativeScript自定義標記圖標
- 25. 由於未定義變量,Google Maps API V3標記未顯示
- 26. Google maps API V3 - DirectionsRendererOptions和InfoWindow中的自定義內容
- 27. 自定義谷歌地圖API V3標識標籤
- 28. 谷歌地圖android api實用程序庫 - 自定義羣集圖標
- 29. Google Maps羣集項目標記 - 更新標記圖標
- 30. Google Maps API v3:標記未被刪除
看起來像有逗號的失蹤爲每個標記的屬性列表...來自FireFox'錯誤:在屬性列表後缺少}。 – 2011-09-14 02:08:36