LocalContextMapView インスタンスと内部マップの両方でイベントを処理できます。LocalContextMapView は 2 つのイベントのみに対応しています。このイベントは、ユーザーが場所を選択したとき（Place Details を開いたとき）と、ユーザーが Place Details を閉じたときに呼び出されます。これらのイベントを使用すると、任意の UI 要素を更新できます。
placedetailsviewshowstartは、ユーザーが場所を選択すると、Place Details が表示される前に呼び出されます。placedetailsviewhidestartは、Place Details が非表示になる前にユーザーが Place Details を閉じると呼び出されます。
次の例では、LocalContextMapView インスタンス上で両方の対応リスナーを設定しています（この設定は initMap() 関数で行います）。
// Set the LocalContextMapView event handlers.
localContextMapView.addListener('placedetailsviewshowstart', () => {
console.log("The 'placedetailsviewshowstart' event just fired!");
});
localContextMapView.addListener('placedetailsviewhidestart', () => {
console.log("The 'placedetailsviewhidestart' event just fired!");
});
LocalContextMapView から作成した地図で、ユーザー インターフェース イベントを処理することもできます。次の例は、地図がマウスオーバー イベントを検出するたびに呼び出されるイベント ハンドラです。
// Set a mouseover event handler on the inner map.
localContextMapView.map.addListener('mouseover', () => {
console.log("The mouse just entered the map!");
});
また、LocalContextMapView は、Esc キーが押されると、Place Details または写真のライトボックスを閉じます。この動作を変更する場合は、keydown イベントとキャプチャ フェーズでの Esc キーのリスナーをウィンドウ オブジェクトに追加して、デフォルトの動作に介入することをおすすめします。
// Change the escape key behavior.
window.addEventListener('keydown', event => {
if (event.key !== 'Escape') return;
event.stopPropagation();
// Handle the event.
// ...
}, /* useCapture= */ true);
または、LocalContextMapView がコードの前にキーボード イベントを処理できるように、バブルフェーズで、keydown リスナーをウィンドウに登録します。
// Won't be fired if LocalContextMapView handled the escape key to close
// the place details view or photo lightbox:
window.addEventListener('keydown', event => {
if (event.key !== 'Escape') return;
// Handle the event.
// ...
}, /* useCapture= */ false);
詳細
- イベントの実例を見るローカル コンテキスト ライブラリのサンプルは、実装の詳細を含め、ローカル コンテキスト ライブラリの一般的な使用例を示しています。
- 詳しくは、Maps JavaScript API のイベントをご覧ください。