コンテンツにスキップ

コンテキストメニューの設定

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

  • 地図にコンテキストメニューを設定する方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

コンテキストメニューを設定する

  1. 地図を初期化します
  2. mapscript.value.ContextMenu オブジェクトを生成します
  3. setContextMenu()関数（ Map クラス ）を用いて地図にコンテキストメニューを設定します
    ※コンテキストメニューを削除する場合は clearContextMenu()関数（ Map クラス ）をご利用ください
サンプルコード
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>地図にコンテキストメニューを設定する</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 
                });

                // (2) ContextMenuを作成
                const menu = new mapscript.value.ContextMenu([
                    {
                        // メニューに表示する文字列
                        text: 'ここを中心にする', 
                        // 上記メニューが選択されたときの挙動                
                        onselect(e) {         
                            map.setCenter(e.position, true);
                        }
                    },
                    {
                        text: 'アラートを表示',
                        onselect(e) {
                            alert('サンプル');
                        }
                    }
                ]);
                // (3) ContextMenuを地図に追加
                map.setContextMenu(menu);

                // ContextMenuを地図から削除
                // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください
                map.clearContextMenu(menu);
            }
        </script>
    </head>

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

コンテキストメニューをクリックした際の返却値

コンテキストメニューをクリックした際の返却値（上記の実装例では onselect の引数にあたる）からは以下の値が取得できます。
● native：元のマウスイベント
● position：クリックした地点の緯度経度（LatLngオブジェクト）
詳しくはこちらをご覧ください。

関連ページ