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

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

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

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

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

  1. 地図を初期化します
  2. mapscript.object.GLMarkerIconInfo オブジェクトを生成し、マーカー画像の情報を指定します
  3. (2)を利用し mapscript.object.GLMarker オブジェクトを生成します
  4. (3)で生成したオブジェクトを addGLMarker()関数（ Map クラス ）を用いて追加します
    ※マーカーを削除する場合は removeGLMarker()関数（ Map クラス ）をご利用ください
サンプルコード
<!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 
                });

                // (2) GLMarkerIconInfoを生成
                const info = new mapscript.value.GLMarkerIconInfo({
                    icon: '/path/to/icon/image',        // 画像パス(base64文字列も可)
                });

                // (3) GLMarkerを生成
                const glMarker = new mapscript.object.GLMarker({
                    position: center,   // 表示する緯度経度
                    info: info
                });

                // (4) GLMarkerを地図に追加
                map.addGLMarker(glMarker);

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

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

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

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

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

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

サンプルコード
const info = new mapscript.value.GLMarkerIconInfo({
    icon: '/path/to/icon/image', 
});
const glMarker = new mapscript.object.GLMarker({
    position: new mapscript.value.LatLng(35.68081, 139.76779), 
    info: info
});

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

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

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

関連ページ