GL版マーカーのイベント設定
このページでは以下の方法について説明しています。
- GL版マーカーにイベントを設定する方法
- GL版マーカーに設定されたイベントを削除する方法
対象クラス
対象関数
- mapscript.object.GLMarker.addEventListener()
- mapscript.object.GLMarker.removeEventListener()
- mapscript.Map.addGLMarker()
実装サンプル
こちらをご覧ください。
実装方法
GL版マーカーにイベントを設定する
- 地図を初期化します
- イベントを設定するmapscript.object.GLMarkerオブジェクトを生成します
- イベントが起きた際に発火する関数を用意します
- addEventListener()関数( GLMarker クラス )を用いてオブジェクトにイベントを設定します
第一引数にはイベント名、第二引数には発火させる関数(今回は(3)で作成した関数)を指定します
※イベントを削除する場合は removeEventListener()関数( GLMarker クラス )をご利用ください
サンプルコード
<!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 }); const info = new mapscript.value.GLMarkerIconInfo({ icon: '/path/to/icon/image', // 画像パス(base64文字列も可) }); // (2) オブジェクトを生成 const glMarker = new mapscript.object.GLMarker({ position: center, // 表示する緯度経度 info: info }); // (3)関数を用意 const clickFunc = () => alert('click!'); // (4)リスナー関数を設定 glMarker.addEventListener('click', clickFunc); // 地図上にマーカーを追加 map.addGLMarker(glMarker); // リスナー関数を削除 // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください glMarker.removeEventListener('click', clickFunc); } </script> </head> <body onload="initMap()"> <div id="map" style="height: 500px; width: 500px;"></div> </body> </html>
設定できるイベントについて
mapscript.object.GLMarkerオブジェクトに設定できるイベントは以下の通りです。
● click : マーカーがクリックされたとき
● position_changed : マーカーの緯度経度が変わった(ドラッグ後など)とき
● dragging : ドラッグ操作中のとき
● dragend : ドラッグ操作の終了したとき
● appear : マーカーが非表示→表示に変わったとき
● disappear : マーカーが表示→非表示に変わったとき
● mouseout : マーカーからマウスポインタが降りたとき
● mouseover : マーカーにマウスポインタが乗ったとき
詳しくはこちらをご覧ください。