Function addGLMarker

GLMarkerを1件追加する — 詳細な使用例

WebGL でレンダリングされる高パフォーマンスなマーカーを地図上に配置します。 独自アイコン画像・ラベル・クリックイベントを持ち、大量配置にも適しています。 複数追加時は addGLMarkers（複数形）を使うほうがパフォーマンス上有利です。 クラスタリングを行う場合は addGLMarkerClusteringCondition と組み合わせてください。

---

GLMarker コンストラクタオプション

オプション	型	説明
position	GIA.value.LatLng	表示位置
info	GIA.value.GLMarkerIconInfo	アイコン画像・サイズの設定
zIndex	number	描画順（大きいほど前面）
label	GIA.types.GLMarkerLabelOptions	ラベルテキストとスタイル
labelZoomRange	GIA.value.ZoomRange	ラベルを表示するズーム範囲

GLMarkerIconInfo コンストラクタオプション

オプション	型	説明
icon	string	アイコン画像パスまたは Base64
size	GIA.value.Size	アイコンの表示サイズ（px）

Warning

• 複数マーカーを追加する場合は必ず addGLMarkers を使用してください。 1件ずつ addGLMarker を呼ぶとパフォーマンスが低下します。
• removeGLMarker / removeGLMarkers は追加時と同一インスタンスを渡す必要があります。変数として保持してください。
• クラスタリング時はマーカーを map.addGLMarkers ではなく condition.addGLMarkers に渡してください。

Example: 単体マーカーを追加してクリックイベントを取得する

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

const info = new GIA.value.GLMarkerIconInfo({
  icon: 'path/to/marker.png',
  size: new GIA.value.Size(46, 33),
});

const marker = new GIA.object.GLMarker({
  position: new GIA.value.LatLng(35.6812, 139.7671),
  info,
  zIndex: 1000,
});

marker.addEventListener('click', () => {
  console.log('クリックされたマーカーの位置:', marker.getPosition());
});

map.addGLMarker(marker);

// 位置更新
marker.setPosition(new GIA.value.LatLng(35.69, 139.70));

// 表示 / 非表示切り替え
marker.hide();
marker.show();

// 削除
map.removeGLMarker(marker);
Copy

Example: 複数マーカーを管理する（倒济管理パターン）

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

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

let markers: GIA.object.GLMarker[] = [];

// 表示: 前回のマーカーを削除してから再追加
const showMarkers = (coords: Array<{ lat: number; lon: number }>) => {
  map.removeGLMarkers(markers);
  markers = [];

  for (const coord of coords) {
    const marker = new GIA.object.GLMarker({
      position: new GIA.value.LatLng(coord.lat, coord.lon),
      info,
      zIndex: 1000,
    });
    markers.push(marker);
  }

  map.addGLMarkers(markers); // まとめて追加（パフォーマンス推奨）
};

// 非表示
const hideMarkers = () => {
  map.removeGLMarkers(markers);
  markers = [];
};
Copy

Example: `setProperties` でマーカーにメタデータを持たせてクリック時に取り出す

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

type SpotData = { name: string; id: number };

const marker = new GIA.object.GLMarker({
  position: new GIA.value.LatLng(35.6581, 139.7016),
  info,
});

// マーカーにプロパティがセットできる
marker.setProperties<SpotData>({ name: '東京タワー', id: 42 });

marker.addEventListener('click', () => {
  const data = marker.getProperties<SpotData>();
  console.log('クリックされたスポット:', data?.name);
});

map.addGLMarker(marker);
Copy

Example: ラベル付きマーカーを追加する

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

const labelStyle: GIA.types.GLMarkerLabelStyle = {
  fontSize: '12px',
  fontWeight: 'bold',
  color: '#FFFFFF',
  backgroundColor: '#88888888',
};

const marker = new GIA.object.GLMarker({
  position: new GIA.value.LatLng(35.6812, 139.7671),
  info,
  label: {
    content: '東京駅',
    offset: new GIA.value.Point(24, 4),
    style: labelStyle,
  },
  labelZoomRange: new GIA.value.ZoomRange(14, 24),
});

map.addGLMarker(marker);
Copy

See

• addGLMarker
• addGLMarkers
• removeGLMarker
• removeGLMarkers
• addGLMarkerClusteringCondition
• removeGLMarkerClusteringCondition