3

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

当我单击地图上的某个位置时，将其拖动直到光标离开 iframe，然后释放鼠标按钮，然后当我将地图移到地图上时，即使我没有按下鼠标按钮，地图也会粘在光标上了。

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

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

有人已经有这个问题了吗？这几天一直困扰着我...

提前致谢。

4

1 回答 1

2

我不完全确定谷歌地图依赖什么事件来停止拖动地图，但只是在玩你的演示时，我注意到当你mouseup进入 iframe 时它会停止。如果您mouseout在 iframe 上模拟此事件，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 中的页面。但是，看起来那里甚至没有发生拖动错误，因此可能不值得为这种情况提供。祝你好运！

于 2012-12-20T18:09:13.690 回答