5

ユーザーがマップ上の任意の場所をクリックしたときに特定のインフォボックスを表示し、ユーザーがOverlayView内をクリックしたときに別のインフォボックスを表示したいと思います。

マップオブジェクトのクリックイベントにリスナーを追加していますが、このイベントはlatLongパラメータのみを提供し、OverlayViewがヒットしたかどうかを判断するには不十分と思われます。

    google.maps.event.addDomListener(map, 'click', function(param) {
        // if( an OverlayView was clicked)
        // showInfoboxForOverlayView();
        // else
        // showStandarInfobox();
    });

OverlayViewオブジェクトに個別のリスナーを追加できることはわかっていますが、これを行うと、両方のイベントが発生します（OverlayViewオブジェクトからのイベントとmapオブジェクトからのイベント）。

これが、OverlayViewオブジェクトを作成する方法です。

    var overlay = new google.maps.OverlayView();
    overlay.onAdd = function () {

        var layer = d3.select(this.getPanes().overlayMouseTarget).append("div").attr("class", "SvgOverlay");
        var svg = layer.append("svg");
        var adminDivisions = svg.append("g").attr("class", "AdminDivisions");

        overlay.draw = function () {
            var markerOverlay = this;
            var overlayProjection = markerOverlay.getProjection();

            // Turn the overlay projection into a d3 projection
            var googleMapProjection = function (coordinates) {
                var googleCoordinates = new google.maps.LatLng(coordinates[1] + 0.0005, coordinates[0] - 0.0006);
                var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
                return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
            }

            path = d3.geo.path().projection(googleMapProjection);
            adminDivisions.selectAll("path")
                    .data(geoJson.features)
                    .attr("d", path) // update existing paths
                    .enter().append("svg:path")
                    .attr("d", path);;
        };
    };

何か案は？

4

3 に答える 3

1

オーバーレイ要素のハンドラー内のグローバルイベントオブジェクトからcancelBubbleフラグを使用してみてください。

event.cancelBubble = true;

これにより、2番目のクリックハンドラーがトリガーされなくなります。

于 2012-11-02T14:41:10.770 に答える
0

あなたのOverlayView：

onAdd：のリスナーを削除しmap、オーバーレイのリスナーを追加します。

onRemove：オーバーレイのリスナーを追加mapし、オーバーレイのリスナーを削除します。

于 2012-10-29T01:38:55.767 に答える
0

これがうまくいくかどうかはわかりません。簡単な修正でもありません。

  1. グーグルマップのイベントは一切使用しないでください
  2. ジオパスごとに個別のイベントリスナーを追加します-d3.on()メソッドを使用
  3. svg:rectすべてのパスの後ろに配置して、マップ全体のサイズの透明なものを作成します。クリックイベントを購読します。これは、通常のマップクリックを表します。
于 2012-11-03T09:21:00.300 に答える