Google Maps api v3 + canvas + chrome会在youtube视频和地图元素上生成黑框

Question

我遇到两个问题..

问题1 这只发生在Mac上的chrome上,尝试过canary和旧版本..矩形是一个<canvas>元素..这里是它的截图.看起来黑色矩形是标记的位置.标记仍然可以点击,只是无法看到它.

问题2 我正在获得一个黑盒子,其中包含嵌入在Google Maps api v3的InfoBubble中的YouTube视频.单击标记图标后放大时,黑框通常会消失. 这仅发生在Windows中的Chrome上.

我所指的开发网站位于:http://sgaz.mapitusa.com 选择Health & Wellness and click on the red marker icon.

我正在为此付出赏金,因为我无法得到答案,我需要一个才能将此产品转移到生产状态.

这是地图代码的GIST https://gist.github.com/a5515bd0b0139185ea16

这是地图初始代码的GIST https://gist.github.com/4937a60d2402e99278b0

更新: 以下是嵌入YouTube视频的iframe代码:

<iframe width="246" height="125" src="http://www.youtube.com/embed/XFDtfg7RquI" frameborder="0" allowfullscreen=""></iframe>

视频上的黑框可以在chrome - > inspect元素中选择,这是HTML ..

<embed width="100%" id="video-player-flash" height="100%" type="application/x-shockwave-flash" src="http://s.ytimg.com/yt/swfbin/watch_as3-vflTsQfnT.swf" allowscriptaccess="always" allowfullscreen="true" bgcolor="#000000" flashvars="el=embedded&amp;fexp=904527%2C913102%2C913601&amp;is_html5_mobile_device=false&amp;allow_embed=1&amp;allow_ratings=1&amp;hl=en_US&amp;use_tablet_controls=0&amp;eurl=http%3A%2F%2Fsgaz.mapitusa.com%2F&amp;iurl=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FXFDtfg7RquI%2Fhqdefault.jpg&amp;view_count=28&amp;probably_logged_in=1&amp;title=GermRid&amp;avg_rating=0&amp;video_id=XFDtfg7RquI&amp;length_seconds=89&amp;sendtmp=1&amp;enablejsapi=1&amp;sk=abu5-utg87bNYJgjGarozMSmFFhRfpxwC&amp;use_native_controls=false&amp;rel=1&amp;playlist_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswfbin%2Fplaylist_module-vflDOq0Br.swf&amp;iurlsd=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FXFDtfg7RquI%2Fsddefault.jpg&amp;jsapicallback=ytPlayerOnYouTubePlayerReady&amp;playerapiid=player1&amp;framer=http%3A%2F%2Fsgaz.mapitusa.com%2F">

Answer 1

您在两个操作系统的Chrome中都存在跨域脚本错误.

不安全的JavaScript尝试使用URL http://www.youtube.com/embed/XFDtfg7RquI从 URL http://sgaz.mapitusa.com/访问框架 .域,协议和端口必须匹配.

您可以使用iframe嵌入的(实验性)JavaScript Player API来规避此问题. http://code.google.com/apis/youtube/iframe_api_reference.html

我也得到了错误

未捕获的TypeError:对象[对象DOMWindow]的属性"焦点"不是函数http://sgaz.mapitusa.com/第94行

在Windows XP上的chrome 17.0.9中.

Answer 2

将以下样式添加到您的 iFrame：
iframe { -webkit-transform:translate3d(0,0,0); }
这解决了我在 Windows 7 上的 Chrome 和 Safari 中的问题。