Google Maps API v3：カンバス描画によるカスタムオーバーレイがサファリでイベントを受信しない

Question

Google Maps API v3でカスタムオーバーレイを実装しようとしています。カスタム描画はキャンバス要素で行いました。基本的には、APIからPolygon要素を再現していますが、ユーザーからイベントを受け取ることができます（目標はゾーン上にドロップすることです）。

描画がうまくいくので、私はキャンバス要素にリスナーを付けるので、問題が発生します。 Safari（5.1.4でテスト済み）は、コンテキストを取得してパスを追加することでキャンバス要素の描画を行うまでイベントを配信します。 Chrome（17）、Firefox（10）、Opera（11）では問題ありません。

hereページを表示することができます。マップの中央にある灰色のポリゴンをクリックすると、イベントが配信されたことを確認するために、plopを地図の下に追加する必要があります。

コードのいくつかの部分は、まずオーバーレイを作成してペインに追加します。

EventReceiverOverlay.prototype.onAdd = function() { 
    var holder = document.createElement('canvas'); 
    holder.style.opacity = 0.5; 
    this.canvas_ = holder; 

    google.maps.event.addDomListener(holder, 'click', function(event) { 
/*  holder.addEventListener('click', function(event) { */ 
    document.getElementById('message_container').innerHTML += 'plop'; 
    }, false); 

    this.getPanes().overlayLayer.appendChild(holder); 
} 

そしてオーバーレイを図面（updateScreenPoints画素座標に点のすべての座標を変換することができます）：

Iは異なるイベント（クリック、マウスオーバー、のdragEnter、等）を用いて試験

EventReceiverOverlay.prototype.draw = function() { 
    var overlayProjection = this.getProjection(); 

    var swCorner = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
    var neCorner = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 

    this.updateScreenPoints(); 
    var canvas = this.canvas_; 

    if (canvas.getContext) { 
    var ctx = canvas.getContext('2d'); 
    ctx.save(); 

    ctx.strokeStyle = '#f00'; 
    ctx.lineWidth = 2; 
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    ctx.clearRect(0, 0, canvas.style.width, canvas.style.height); 

    canvas.style.position = 'relative'; 
    canvas.style.left = Math.round(swCorner.x) + 'px'; 
    canvas.style.top = Math.round(neCorner.y) + 'px'; 

    ctx.beginPath(); 
    ctx.moveTo(this.screenPoints_[0].x, this.screenPoints_[0].y); 
    for (var i = 1; i < this.screenPoints_.length; i++) { 
     ctx.lineTo(this.screenPoints_[i].x, this.screenPoints_[i].y); 
    } 
    ctx.fill(); 
    ctx.restore(); 
    } 

} 

、イベントを添付するさまざまな方法（google.maps.event.addDOMListener、ブラウザaddEventListener、jQuery on）と同じ結果が得られます。Safariはうまく再生できませんが、他は期待どおりに動作し、機能が起動します。

また、overlayMouseTargetやfloatPaneなどの別のマップペインにオーバーレイを追加しようとしましたが、追加の変更はありません。

もう一度試してみると、Safariがそのような場合にイベントを受け取ったかどうかをテストするために、同じ形状、多かれ少なかれ同じ描画プロセスの単純なキャンバスを実装しています。

単純なdiv要素で同じことを行うと、完全に機能しますが、キャンバスに描画するとすぐに問題が発生します。

私は何が間違っているのか、Google Maps APIとSafariの間にバグがあるかどうかはわかりません。あなたが編集 私はちょうど書いた全体的な話を通過する:)

おかげ

を管理するのであれば、あなたの助けが大幅ブレンダン・ケニーは、OS X 10.6.8に問題がない報告どうやらとして、理解されるであろうSafari 5.1.2私はOS X 10.6.8とSafari 5.0.5でそれをテストしましたが、問題はありません。

hereの2番目のページを作成しました。描画部分を削除する以外の変更はありません（drawメソッドでキャンバスからコンテキストを使用していたすべての部分を削除しました）。赤い矩形をクリックすると、下のdivに「plop」が追加され、Safari 5.1.4では期待通りに動作します。

編集2 Safari 6.0で修正されました。私は何が起こったのかわかりません。

Answer 1

Google 実際にはではこの手法が嫌いです。キャンバスとキャンバスはZ-インデックスのために戦いますが、マウスイベントは1つだけ受け取り、A）あなたのものは動作しますが、地図をクリック/パン/ズームすることはできません。B）その逆もあります。新しいマップが高いzインデックスで表示されるため、地図をパニングした後で動作しないことがあります。 Googleのコントロールを追加するか、2本指のトラックパッドズームを使用しようとすると、それらが機能しないことがわかります。

Googleのポリゴン（Polygon）クラスなどを使用してください。すべてが世界に適しているはずです。私は経験から話します - 私はこのように私のプロジェクトをやろうとしましたが、同じ壁にぶつかりました。私はGoogleの意志に屈し、すべてがうまい。