コンテンツにスキップ

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

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

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

利用上の注意点について

GL版マーカーを利用する場合は、サーバ上に配置したhtmlでご利用ください。
ローカルに配置したhtmlで描画をしようとした場合、CORSエラーが発生する場合があります。

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

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

  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();

関連ページ