Function addMarker

  • Markerを追加する — 詳細な使用例

    DOMベースのマーカーを地図上に配置します。 HTML/CSS で自由にスタイリングでき、クリックイベントも設定可能です。 大量のマーカーを配置する場合は WebGL 描画の addGLMarker の利用を検討してください。

    Returns void

    Warning

    • removeMarker は追加時と同一インスタンスを渡す必要があります。変数として保持してください。
    • 大量配置(目安: 数十件以上)では addGLMarkers のほうがパフォーマンスに優れます。

    Example: マーカーを追加してクリックイベントを受け取る

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

    const marker = new GIA.object.Marker({
    latlng: new GIA.value.LatLng(35.6812, 139.7671),
    element: (() => {
    const el = document.createElement('div');
    el.className = 'my-marker';
    el.textContent = '📍';
    return el;
    })(),
    });

    marker.setClickListener(() => {
    console.log('マーカーがクリックされました');
    });

    map.addMarker(marker);

    // 削除
    map.removeMarker(marker);

    See