吹き出しのイベント設定
このページでは以下の方法について説明しています。
- 吹き出しにイベントを設定する方法
- 吹き出しに設定されたイベントを削除する方法
対象クラス
対象関数
- mapscript.Map.addInfoWindow()
- mapscript.object.InfoWindow.addEventListener()
- mapscript.object.InfoWindow.removeEventListener()
実装サンプル
こちらをご覧ください。
実装方法
吹き出しにイベントを設定する
- 地図を初期化します
- イベントを設定するmapscript.object.InfoWindow オブジェクトを生成します
- イベントが起きた際に発火する関数を用意します
- addEventListener()関数( InfoWindow クラス )を用いてオブジェクトにイベントを設定します
第一引数にはイベント名、第二引数には発火させる関数(今回は(2)で作成した関数)を指定します
※イベントを削除する場合は removeEventListener()関数( InfoWindow クラス )をご利用ください
サンプルコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>吹き出しのイベント設定</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 infoWindow = new mapscript.object.InfoWindow({ content: 'サンプル', position: center }); // (3)関数を用意 const clickFunc = () => alert('click!'); // (4)リスナー関数を設定 infoWindow.addEventListener('click', clickFunc); // 地図上に吹き出しを追加 map.addInfoWindow(infoWindow); // リスナー関数を削除 // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください infoWindow.removeEventListener('click', clickFunc); } </script> </head> <body onload="initMap()"> <div id="map" style="height: 500px; width: 500px;"></div> </body> </html>
設定できるイベントについて
mapscript.object.InfoWindow オブジェクトに設定できるイベントは以下の通りです。
● click : 吹き出しががクリックされた場合
● open : 吹き出しが非表示 → 表示に変わった場合
● close : 吹き出しが表示 → 非表示に変わった場合
詳しくはこちらをご覧ください。