web-dev-qa-db-ja.com

MarkerClustererアイコンのスタイリング？

MarkerCluster.jsを使用して、GoogleマップAPIでクラスタリングを作成しています。クラスターは希望どおりに機能しますが、黄色、青、赤の円とは異なるスタイルにしたいです。 MarkerStyleOptionsを使用しようとしていましたが、最小のクラスターアイコンが最初に、最大のアイコンが最後にあるスタイルの配列があると書かれています。これを下で作成しようとしましたが、使用する構文について本当に混乱しており、良い例が見つかりません。

var clusterStyles = [
    [opt_textColor: 'white'],
    [opt_textColor: 'white'],
    [opt_textColor: 'white']
];

var mcOptions = {
    gridSize: 50,
    styles: clusterStyles,
    maxZoom: 15
};
var markerclusterer = new MarkerClusterer(map, cluster, mcOptions);
javascriptgoogle-maps-api-3markerclusterer
45
Louise McComiskey

あなたがする必要があるのは、現在使用されている青/黄/赤の画像の代わりに、使用する画像を指定するためにURLを使用することです。また、高さと幅のオプションも含めることをお勧めします。

var clusterStyles = [
  {
    textColor: 'white',
    url: 'path/to/smallclusterimage.png',
    height: 50,
    width: 50
  },
 {
    textColor: 'white',
    url: 'path/to/mediumclusterimage.png',
    height: 50,
    width: 50
  },
 {
    textColor: 'white',
    url: 'path/to/largeclusterimage.png',
    height: 50,
    width: 50
  }
];
90
duncan

かなり役立つ回答を投稿するのに遅すぎることはないので、さらに全体を確認できます MarkerClusterer Documentation for IconStyle

[〜＃〜] update [〜＃〜]

githubのGoogleマップv3ユーティリティ ehcanadianが述べているように

3
Yazan Rawashdeh