web-dev-qa-db-ja.com

グーグルマップクラスターカスタム画像

カスタム画像でグーグルマップのクラスタリングを変更したいのですが。ただし、私が提供するものは何も変更されません。このinitMap関数は

https://developers.google.com/maps/documentation/javascript/marker-clustering

そして、グーグルからのランダムな画像でクラスター画像を変更しようとしました。ただし、何もレンダリングされません。

クラスタはカスタムクラスタイメージをサポートしていませんか？

function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'http://www.empowervate.org/wp-content/uploads/2015/11/circle.jpg'});
      }

助けてくれてありがとう@henrisycip

以下のようなスタイルオプションを提供することで、クラスターイメージを変更することができました。 imagePathが何もしない理由がわかりません..

 styles={[
              {
                url: "/static/images/cluster/m1.png",
                height: 53,
                width: 53
              },
              {
                url: "/static/images/cluster/m2.png",
                height: 53,
                width: 53
              },
              {
                url: "/static/images/cluster/m3.png",
                height: 53,
                width: 53
              },
              {
                url: "/static/images/cluster/m4.png",
                height: 53,
                width: 53
              },
              {
                url: "/static/images/cluster/m5.png",
                height: 53,
                width: 53
              }
            ]}
javascriptreactjsgoogle-mapsreact-google-maps
6
fiddlest

これらの画像を読み込む特定の方法があります。これは、サンプルコードにリンクされているmarkerclusterer.jsライブラリが原因です。

指定したimagePathを調べますが、image1、image2、image3などを探して繰り返されます。そのため、https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/mのデフォルトパスはm1の検索を開始するため、機能します。 png、m2.png、m3.pngなど。

これは、それがそれを行っていると言っているライブラリの部分です：

'imagePath': (string) The base URL where the images representing
 *                  clusters will be found. The full URL will be:
 *                  {imagePath}[1-5].{imageExtension}
 *                  Default: '../images/m'.

コンソールを確認すると、次のようなものが表示されていると確信しています。

GET http://www.empowervate.org/wp-content/uploads/2015/11/circle.jpg1.png 404（見つかりません）

あなたが知る必要があるすべては実際には ドキュメント にあります。マーカークラスター.js、m1.png、m2.pngなどのコピーをダウンロードして、パスを独自のフォルダー構造に変更するように指示されていることがわかります。

画像パスの例は次のようになります：imagePath: 'http://www.empowervate.org/wp-content/uploads/2015/11/circle'（circle1.png、circle2.pngなどがある場合）。

この前の質問も確認できます： マーカーを上書きせずにマーカークラスターにカスタム画像を追加

8
henrisycip

別の方法として、画像のURLの末尾に「＆z =」（zは任意のパラメーター名にすることができます）を追加するだけで、好きな画像を使用できます。

これにより、自動追加された「[1 | 2 | 3] .png」がURLを変更するのを防ぎます。

0
TylerBUrquhart