コンテンツにスキップ

吹き出しの描画・削除

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

  • 地図上に吹き出しを描画する方法
  • 地図上の吹き出しを削除する方法
  • 吹き出しの表示・非表示を操作する方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

地図上に吹き出しを描画する（描画した吹き出しを削除する）

  1. 地図を初期化します
  2. mapscript.object.InfoWindow オブジェクトを生成します
  3. addInfoWindow()関数（ Map クラス ）を用いて地図上に(2)で生成したオブジェクトを追加します
    ※吹き出しを削除する場合は removeInfoWindow()関数（ 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) InfoWindowを生成
                const infoWindow = new mapscript.object.InfoWindow({
                    content: 'サンプル',       // 吹き出しの中に表示したい内容
                    position: center  // 吹き出しを表示する緯度経度
                });

                // (3) InfoWindowを地図に追加
                map.addInfoWindow(infoWindow);

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

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

オブジェクトを作成するときのパラメータについて

mapscript.Object.InfoWindow オブジェクトを作成する際 content / position パラメータの指定は必須となりますが、他にもオプショナルで指定できるパラメータがあります。
詳しくはこちらをご覧ください。

利用する際の注意

吹き出しの追加後、画面解像度の変化が伴う様な動作をした場合、吹き出しの位置が正常ではなくなる恐れがあります。
画面解像度の変化が起こることが想定できる場合は、以下の様な記述で解像度の変化に合わせてsetClientSize()を呼び出す処理の記述をお願いいたします。

function resizeMap() {
    const el = document.querySelector('#map');
    const height = el.clientHeight;
    const width = el.clientWidth;
    map.setClientSize(new GIA.value.Size(height, width));
}

window.addEventListener('resize', resizeMap);
window.addEventListener('orientationchange', resizeMap);

吹き出しの表示・非表示を切り替える

地図上に追加した吹き出しを非表示にしたい・表示したい場合は以下のような方法で実現が可能です。

サンプルコード
const infoWindow = new mapscript.object.InfoWindow({
    content: 'サンプル',       // 吹き出しの中に表示したい内容
    position: new mapscript.value.LatLng(35.68081, 139.76779)  // 吹き出しを表示する緯度経度
});

// 吹き出しを非表示
infoWindow.close();

// 吹き出しを表示
infoWindow.open();

// 表示状態を取得(trueなら表示、falseなら非表示の状態)
infoWindow.isOpen();

// 表示・非表示を切り替え
infoWindow.toggle();

関連ページ