百度地図のイベント処理 -- 緯度と経度の取得（百度地図の簡単な使い方）_html/css_WEB-ITnose

マップ イベントの概要

ブラウザーの JavaScript は「イベント駆動型」です。つまり、JavaScript はイベントを生成することで対話に応答し、プログラムが対象のアクティビティを「リッスン」することを期待します。たとえば、ブラウザでは、ユーザーのマウスとキーボードの操作により、DOM 内に伝播するイベントが作成されることがあります。特定のイベントに関心のあるプログラムは、それらのイベントの JavaScript イベント リスナーを登録し、それらのイベントを受信したときにコードを実行します。

Baidu Map API には独自のイベント モデルがあり、プログラマはマップ API オブジェクトのカスタム イベントをリッスンできます。使用方法は DOM イベントと似ています。ただし、Map API イベントは独立しており、標準の DOM イベントとは異なることに注意してください。

イベントリスニング

Baidu Map API のほとんどのオブジェクトには addEventListener メソッドが含まれており、これを通じてオブジェクト イベントをリッスンできます。たとえば、BMap.Map には click、dblclick、その他のイベントが含まれています。これらのイベントは特定の状況下でトリガーされ、リスニング関数は対応するイベント パラメーター e を取得します。たとえば、ユーザーがマップをクリックすると、e パラメーターにはマウスに対応する地理的位置ポイントが含まれます。

Map API オブジェクトのイベントについては、完全な API リファレンス ドキュメントを参照してください。

addEventListener メソッド には、リッスンするイベントの名前と、イベントがトリガーされたときに呼び出される関数の 2 つのパラメーターがあります。以下の例では、ユーザーが地図をクリックするたびに、アラート ボックスがポップアップ表示されます。

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("click", function(){     alert("您点击了地图。");    });

イベントをリッスンすることで、イベント がトリガーされた後のステータスをキャプチャすることもできます。次の例は、ユーザーが地図をドラッグした後の地図の中心の緯度と経度の情報を示しています。

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("dragend", function(){     var center = map.getCenter();     alert("地图中心点变更为：" + center.lng + ", " + center.lat);    });

イベントパラメータとthis

標準のDOMイベントモデル（DOMレベル2イベント）では、リッスン関数はイベントオブジェクトeを取得し、そこでイベントに関する情報を取得できます。同時に、リスニング関数では、これはイベントをトリガーした DOM 要素を指します。 Baidu Map API のイベント モデルはこれに似ています。イベント オブジェクト e には、少なくともイベント タイプ (タイプ) とイベントをトリガーしたオブジェクト (ターゲット) が含まれます。また、API は、関数内の this が、イベントをトリガーした (そしてバインドされていた) API オブジェクトを指していることも保証します。

例えばパラメータeを通じてクリックの緯度経度の座標を取得します。

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("click", function(e){     alert(e.point.lng + ", " + e.point.lat);    });

または、これを通じてマップのズームレベルを取得します。

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("zoomend", function(){     alert("地图缩放至：" + this.getZoom() + "级");    });

リスニングイベントを削除

イベントをリスニングしたくない場合は、

イベントリスニングを削除できます。各 API オブジェクトは、イベント リスニング関数を削除するための removeEventListener を提供します。 次の例では、ユーザーがマップ上で最初にクリックすると、イベント リスニング関数がトリガーされます。そのため、イベント リスニング関数は関数内で削除されるため、それ以降のクリック操作ではリスニング関数はトリガーされません。読んでくれてありがとう！