GL版マーカーの描画・削除
このページでは以下の方法について説明しています。
- 地図上にGL版マーカーを描画する方法
- 地図上のGL版マーカーを削除する方法
- GL版マーカーの表示・非表示を切り替える方法
対象クラス
対象関数
- mapscript.Map.addGLMarker()
- mapscript.Map.removeGLMarker()
- mapscript.object.GLMarker.hide()
- mapscript.object.GLMarker.show()
- mapscript.object.GLMarker.isVisible()
実装サンプル
こちらをご覧ください。
実装方法
地図上にマーカーを描画する(描画したマーカーを削除する)
- 地図を初期化します
- mapscript.object.GLMarkerIconInfo オブジェクトを生成し、マーカー画像の情報を指定します
- (2)を利用し mapscript.object.GLMarker オブジェクトを生成します
- (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();