GL版マーカーのイベント設定

このページでは以下の方法について説明しています。

  • GL版マーカーにイベントを設定する方法
  • GL版マーカーに設定されたイベントを削除する方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

GL版マーカーにイベントを設定する

  1. 地図を初期化します
  2. イベントを設定するmapscript.object.GLMarkerオブジェクトを生成します
  3. イベントが起きた際に発火する関数を用意します
  4. addEventListener()関数（ GLMarker クラス ）を用いてオブジェクトにイベントを設定します
    第一引数にはイベント名、第二引数には発火させる関数（今回は(3)で作成した関数）を指定します
    ※イベントを削除する場合は removeEventListener()関数（ GLMarker クラス ）をご利用ください
サンプルコード
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>GL版マーカーのイベント設定</title>
        <script src="https://{HOST}/{CID}/v2/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
        <script>
            function initMap(){
                const center = new mapscript.value.LatLng(35.68081, 139.76779);
                // (1) 地図を初期化
                const map = new mapscript.Map('{CID}', {
                    target: '#map', 
                    center: center, 
                    zoomLevel: 15 
                });
                const info = new mapscript.value.GLMarkerIconInfo({
                    icon: '/path/to/icon/image',        // 画像パス(base64文字列も可)
                });

                // (2) オブジェクトを生成
                const glMarker = new mapscript.object.GLMarker({
                    position: center,   // 表示する緯度経度
                    info: info
                });

                // (3)関数を用意
                const clickFunc = () => alert('click!');
                // (4)リスナー関数を設定
                glMarker.addEventListener('click', clickFunc);
                // 地図上にマーカーを追加
                map.addGLMarker(glMarker);


                // リスナー関数を削除
                // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください
                glMarker.removeEventListener('click', clickFunc);

            }
        </script>
    </head>

    <body onload="initMap()">
        <div id="map" style="height: 500px; width: 500px;"></div>
    </body>
</html>

設定できるイベントについて

mapscript.object.GLMarkerオブジェクトに設定できるイベントは以下の通りです。
● click : マーカーがクリックされたとき
● position_changed : マーカーの緯度経度が変わった(ドラッグ後など)とき
● dragging : ドラッグ操作中のとき
● dragend : ドラッグ操作の終了したとき
● appear : マーカーが非表示→表示に変わったとき
● disappear : マーカーが表示→非表示に変わったとき
● mouseout : マーカーからマウスポインタが降りたとき
● mouseover : マーカーにマウスポインタが乗ったとき
詳しくはこちらをご覧ください。

関連ページ