Question

当我将它们嵌入到iframe中时，谷歌地图（api v3）出现了一些问题。

当我点击地图上的某个地方时，拖动它直到光标离开iframe，并释放鼠标按钮，然后当我将它移到地图上时地图会粘到光标上，即使我没有按下鼠标按钮了。

http://my.brandtr.ee/public/tmp/test-iframe.html

似乎如果地图嵌入在iframe中，那么如果用户在iframe之外释放鼠标按钮，则地图不会捕获“mouseup”事件。只有webkit浏览器（chrome 23，safari 6）和IE才会出现此问题。 Firefox工作正常。

有没有人有这个问题？它已经困扰了我好几天了......

提前致谢。

Answer 1

我不完全确定谷歌地图依赖什么事件来停止拖动地图，但只是在玩你的演示时，我注意到当你在iframe中mouseup时它会停止。如果您在iframe的mouseout上模拟此活动，Google地图会认为您在那里放开了地图，并停止拖动。

我在控制台内部尝试了这段代码，但效果很好：

var iframe = document.getElementsByTagName('iframe')[0];
iframe.addEventListener('mouseout', function(e){
    var doc = this.contentDocument || this.contentWindow; // wk/moz vs. ie
    doc = doc.document || doc; // opera
    if (doc.createEvent) {
        var evt = doc.createEvent('MouseEvents');
        evt.initMouseEvent('mouseup', true, false, window, 
            0, e.screenX, e.screenY, e.clientX, e.clientY, 
            false, false, false, false, 0, null
        );
        doc.getElementsByTagName('body')[0].dispatchEvent(evt);
    } else if (doc.createEventObject) { // legacy ie
        var evt = doc.createEventObject(e);
        doc.getElementsByTagName('body')[0].fireEvent('mouseup', e);
    }
});

适用于FF，Safari，Chrome和Opera。我在IE中快速浏览了你的页面而没有应用修复程序。但是，它看起来并不像那里发生的拖拽bug，因此可能不值得提供这种情况。祝你好运！

嵌入在iframe中的谷歌地图粘贴光标（webkit浏览器和IE）

1 个答案: