Google Maps API v3: Benutzerdefiniertes Overlay mit Leinwandzeichnung, die keine Ereignisse in Safari empfängt

Question

Ich versuche, ein benutzerdefiniertes Overlay in Google Maps API v3 zu implementieren, wobei einige benutzerdefinierte Zeichnungen über ein Canvas-Element erstellt wurden. Im Grunde reproduciere ich das Polygon-Element aus der API, aber mit der Fähigkeit, Ereignisse vom Benutzer zu empfangen (das Ziel ist es, einige Dinge in der Zone fallen zu lassen, mit nativem Drag'n Drop).

Also Zeichnung funktioniert gut, ich füge einen Listener an das Canvas-Element und das ist, wo Probleme passiert. Safari (getestet mit 5.1.4) liefert das Ereignis, bis ich etwas auf dem Canvas-Element zeichne, indem ich den Kontext abrufe und einen Pfad hinzufüge. Für Chrome (17), Firefox (10) und Opera (11) keine Probleme.

Sie können die Seite here anzeigen. Wenn Sie auf das graue Polygon in der Mitte der Karte klicken, sollte unter der Karte eine plop hinzugefügt werden, um zu überprüfen, ob das Ereignis geliefert wurde.

Hier sind einige Teile des Codes, zuerst das Overlay erstellen und es zu den Scheiben hinzufügen.

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); 
} 

dann die Overlay-Zeichnung (updateScreenPoints erlaubt es, alle Koordinaten der Punkte zu konvertieren, um Pixelkoordinaten):

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(); 
    } 

} 

ich mit verschiedenen Ereignissen getestet (klicken, Mouseover, dragenter-, etc.), verschiedene Möglichkeiten, das Ereignis anzuhängen (durch google.maps.event.addDOMListener, Browser addEventListener, und jQuery on), mit den gleichen Ergebnissen: Safari lehnt es ab, gut zu spielen, während die anderen wie erwartet funktionieren und meine Funktion auslösen.

Ich habe auch versucht, die Überlagerung zu einem anderen Kartenbereich, wie dem overlayMouseTarget oder dem floatPane, ohne zusätzliche Änderungen hinzuzufügen.

Um einen weiteren Versuch zu geben, habe ich eine einfache Leinwand (mit der gleichen Form, mehr oder weniger den gleichen Zeichenprozess) implementiert, um zu testen, ob Safari das Ereignis in diesem Fall empfängt, und ja, es funktioniert.

Das gleiche mit einem einfachen div-Element funktioniert perfekt, das Problem passiert, sobald ich auf der Leinwand zu zeichnen beginnen.

Ich bin mir nicht sicher, was ich falsch gemacht habe oder ob es einen Fehler zwischen Google Maps API und Safari gibt. So wird Ihre Hilfe sehr zu schätzen, wenn man es schafft, durch die ganze Geschichte zu gehen, ich schrieb gerade :)

Dank

bearbeiten Offenbar als Brendan Kenny berichtet gibt es keine Probleme mit OS X 10.6.8 und Safari 5.1.2. Ich habe es mit OS X 10.6.8 und Safari 5.0.5 getestet, und auch keine Probleme.

Ich machte eine zweite Seite, here, mit anderen Änderungen als das Entfernen des Zeichnungsteils (ich löschte alle Teile, die den Kontext aus dem Canvas in der draw-Methode verwendeten). Wenn Sie auf das rote Rechteck klicken, wird dem darunter liegenden div ein "plop" hinzugefügt, der wie erwartet in Safari 5.1.4 funktioniert.

Bearbeiten 2 In Safari 6.0 behoben, rate ich nicht, was passiert ist.

Answer 1

Google wirklich mag diese Technik nicht.Ihre Leinwand und Ihre Leinwand werden um den Z-Index kämpfen, nur einer wird das Mausereignis erhalten, und entweder A) wird Ihre Arbeit funktionieren, aber Sie können nicht auf die Karte klicken/schwenken/zoomen oder B) umgekehrt. Sie können es manchmal zum Laufen bringen, aber nach dem Schwenken der Karte wird es nicht funktionieren, weil die neuen Kacheln mit einem höheren Z-Index kommen. Wenn Sie die Steuerelemente von Google hinzufügen oder versuchen, das Zoomen mit zwei Fingern zu verwenden, sehen Sie, dass diese nicht funktionieren.

Verwenden Sie Googles Polygon-Klasse usw. und alle sollten mit der Welt übereinstimmen. Ich spreche aus Erfahrung - ich habe versucht, mein Projekt auf diese Weise zu machen und die gleiche Wand zu treffen. Ich habe mich nach Googles Willen gebeugt und alles ist groovig.