DOM版マーカーの描画・削除

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

  • 地図上にDOM版マーカーを描画する方法
  • 地図上のDOM版マーカーを削除する方法
  • DOM版マーカーの表示・非表示を切り替える方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

地図上にマーカーを描画する(描画したマーカーを削除する)

  1. 地図を初期化します
  2. mapscript.object.Marker オブジェクトを生成します
  3. (2)で生成したオブジェクトを addMarker()関数( Map クラス )を用いて地図上に追加します
    ※マーカーを削除する場合は removeMarker()関数( Map クラス )をご利用ください
サンプルコード
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>DOM版マーカーの描画・削除</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)オブジェクトの作成
                const marker = new mapscript.object.Marker({
                    icon: '/path/to/icon/image',   // マーカーの画像パス(base64文字列も可)
                    position: center,   // マーカーを表示する緯度経度

                });
                // (3)マーカーを地図に追加
                map.addMarker(marker);

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

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

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

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

マーカーの表示・非表示を切り替える

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

サンプルコード
const marker = new mapscript.object.Marker({
                icon: '/path/to/icon/image',        // マーカーの画像パス(base64文字列も可)
                position: new mapscript.value.LatLng(35.68081, 139.76779),   // 表示する緯度経度
            });

// マーカーを非表示
marker.hide();

// マーカーを表示
marker.show();

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

関連ページ