Google Maps API v3：使用画布绘制的自定义叠加层不在Safari中接收事件

Question

我试图在Google Maps API v3中实现自定义叠加层，并通过canvas元素完成一些自定义绘制。基本上我是从API复制Polygon元素，但能够从用户接收事件（目标是放弃区域上的一些东西，并使用本机拖放）。

所以绘图工作正常，我附加一个监听器到canvas元素，这就是发生问题的地方。 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允许点的所有坐标转换为像素坐标）：

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

} 

我有不同的事件（点击，鼠标悬停，的dragenter等）进行测试，附加事件的不同方式（通过google.maps.event.addDOMListener，浏览器addEventListener和jQuery on），结果相同：Safari拒绝播放，其他播放器按预期工作，触发我的功能。

我也试图添加叠加层到另一个地图窗格，如overlayMouseTarget或floatPane，没有其他更改。

为了让闯闯，我实现了一个简单的帆布（有相同的形状，或多或少相同的拉丝工艺）来测试Safari浏览器接收在这种情况下的事件，是的，它的工作。

做同样的用一个简单的div元素完美的作品，这个问题只要我开始在画布上绘制发生。

我不知道的我做错了什么，或者如果在谷歌地图API和Safari之间的错误。所以你的帮助，将不胜感激，如果你设法去贯穿整个故事，我只写了:)

感谢

编辑 显然当布兰登肯尼报告有与OS X 10.6.8没有任何问题和Safari 5.1.2。我用OS X 10.6.8和Safari 5.0.5测试过，没有问题。

我做了第二个页面，here，除了删除绘图部分（我删除了在draw方法的画布上使用上下文的所有部分）没有其他更改。当点击红色矩形时，“plop”被添加到下面的div中，并且它在Safari 5.1.4中按预期工作。

编辑2 在Safari 6.0中修复，猜我不知道发生了什么。

Answer 1

谷歌真的不喜欢这种技术。他们的画布和画布将争取z-index，只有一个人会收到鼠标事件，并且A）你的东西可以工作，但是你将无法点击/平移/缩放地图或B）反之亦然。您可能有时可以使用它，但是在平移地图之后，它将无法工作，因为新的贴图会以更高的Z-index进入。如果您添加Google的控件或尝试使用双指触控板缩放功能，则会看到这些功能无效。

使用Google的Polygon类等等，所有的东西都应该适合世界。我从经验中发言 - 我试图用这种方式来完成我的项目，并且撞到了同一堵墙上。我倾向于Google的意志，一切都很合时宜。