Function addGLMarkerClusteringCondition

GLMarkerのクラスタリング条件を追加する — 詳細な使用例

GLMarkerClusteringCondition を使うと近接マーカーをまとめてクラスター表示できます。 マーカーは map.addGLMarkers ではなく condition.addGLMarkers に渡すことに注意してください。

---

GLMarkerClusteringCondition オプション

オプション	型	説明
distance	number	クラスタリングする距離（px）
zoomRange	GIA.value.ZoomRange	クラスタリングを有効にするズーム範囲
label	—	クラスター数ラベルのスタイル（fontSize・fontColor・backgroundColor・padding・borderRadius・offset）
clickListener	(_: MouseEvent, element: GLMarkerClusterElement) => void	クラスター・単体マーカークリック時のコールバック
mouseEnterListener	(_: MouseEvent, element: GLMarkerClusterElement) => void	ホバー入時のコールバック
mouseLeaveListener	() => void	ホバー退場時のコールバック

GLMarkerClusterElement の主要メソッド

メソッド	説明
getGLMarker()	クラスターの代表 GLMarker インスタンスを取得
getChildren()	クラスター内の子要素リストを取得（空配列なら単体マーカー）
getBeAloneZoomLevel()	要素が単体になれるズームレベル（0 なら完全に同位置）
getPosition()	クラスターの表示位置

Warning

• マーカーは map.addGLMarkers ではなく condition.addGLMarkers に渡してください。
• condition は同一インスタンスを保持しておき、削除時に removeGLMarkerClusteringCondition に渡してください。
• getChildren().length > 0 のときはクラスターマーカー、0 のときは単体マーカーのクリックです。

Example: クラスタリングを有効にしてマーカーを表示する

import * as GIA from '@ntj/gaia';

type SpotData = { name: string; coord: { lat: number; lon: number } };

const info = new GIA.value.GLMarkerIconInfo({
  icon: 'path/to/pin.png',
  size: new GIA.value.Size(30, 20),
});

let condition: GIA.value.GLMarkerClusteringCondition | undefined;

const showMarkers = (spots: SpotData[]) => {
  if (condition) {
    map.removeGLMarkerClusteringCondition(condition);
  }

  condition = new GIA.value.GLMarkerClusteringCondition({
    distance: 24,
    zoomRange: new GIA.value.ZoomRange(0, 17),
    label: {
      fontSize: 10,
      fontColor: GIA.value.Color.white(),
      backgroundColor: new GIA.value.Color(242 / 255, 169 / 255, 71 / 255, 1.0),
      padding: 2,
      borderRadius: 8,
      offset: new GIA.value.Point(10, 24),
    },
    clickListener: (_event, element) => {
      const glMarker = element.getGLMarker();
      const children = element.getChildren();
      const position = glMarker.getPosition();

      if (children.length > 0) {
        // クラスターマーカー: 単体になれるズームまで拡大
        const zoomLevel = element.getBeAloneZoomLevel();
        const zoom = zoomLevel === 0 ? 18 : zoomLevel; // 完全共地の場合は18に
        map.setZoomLevel(zoom, true);
        map.setCenter(position);
        return;
      }

      // 単体マーカー: プロパティを取り出す
      const data = glMarker.getProperties<SpotData>();
      console.log('クリックされたスポット:', data?.name);
    },
    mouseEnterListener: (_event, element) => {
      const glMarker = element.getGLMarker();
      const data = glMarker.getProperties<SpotData>();
      if (data) console.log('ホバー:', data.name);
    },
    mouseLeaveListener: () => {
      console.log('ホバー退場');
    },
  });

  // マーカーを condition に追加（map ではないことに注意）
  const markers = spots.map((spot) => {
    const marker = new GIA.object.GLMarker({
      position: new GIA.value.LatLng(spot.coord.lat, spot.coord.lon),
      info,
    });
    marker.setProperties(spot);
    return marker;
  });
  condition.addGLMarkers(markers);

  map.addGLMarkerClusteringCondition(condition);
};

const hideMarkers = () => {
  if (condition) {
    map.removeGLMarkerClusteringCondition(condition);
    condition = undefined;
  }
};
Copy

See

• addGLMarkerClusteringCondition
• removeGLMarkerClusteringCondition
• addGLMarker