3

地図上にいくつかの円を表示するGoogleマップアプリケーションがあります。下の画像にあるように、いくつかの円が互いに重なり合っています。

サークルをクリックしたときに追加情報を表示したいのですが。問題は、重なり合う領域をクリックしたときに、複数の円に関する情報を表示したいということです。

この情報を表示する方法はそれほど重要ではありません。インフォウィンドウの場合もあれば、マップ外のDOM要素に表示される場合もあります。それは問題ではありません。

問題は、カーソルの下にあるすべての要素でイベントをトリガーするクリックをどのように処理するかです。

重なり合う円

4

3 に答える 3

2

HTMLとJavaScriptでのイベントバブリングについて学びます。重複するすべての要素に対して機能するイベントリスナーをコーディングできるはずです。

http://www.quirksmode.org/js/events_order.html

于 2012-08-03T10:23:03.817 に答える
2

まず、Circleオブジェクトにメソッドを追加して、マップ上のクリックされたポイントが含まれているかどうかを確認できます。

google.maps.Circle.prototype.contains = function(latLng) {
    return this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
}

次に、作成したすべての円オブジェクトを配列に追加する必要があります。これが私が話している配列だとしましょう：

var circles = new Array();

最後に、ユーザーが地図上のポイントをクリックすると、緯度と経度を取得し、上の配列のすべての要素を確認する必要があります。

var latlng = _CLICKED_LAT_LNG_OBJECT_; // Get this from your map's click event

for(var i = 0; i < circles.length; i++) {
    var _circle = circles[i];
    if( _circle.contains( latlng ) ) {
        // here, you've got a clicked circle ;)
        // do whatever you want with _circle
    }
}
于 2012-08-03T20:42:11.190 に答える
1

サークルのデータがデータベースからのものである場合は、サークルのクリック可能プロパティをfalseに設定し、クリックイベントハンドラーをマップ自体にアタッチできます。次に、クリックが発生すると、クリックの緯度/経度をAJAX呼び出しでサーバーに送信し、データベースでそのポイントをカバーする円を検索します。言うまでもなく、（PostgreSQL / PostGISのような）空間的に有効なデータベースは、タスクをはるかに簡単にします。

于 2012-08-03T10:18:43.040 に答える