google-maps-api-3 - google maps api v3 没有平滑拖动

Question

我开始使用 maps api v3 实现我的软件。不幸的是，我发现 v3 API 存在一些严重的问题，这让我无法获得营业执照。

我的客户使用高清分辨率为 1920x1080 的显示器， map 占用了 90% 的屏幕空间。不幸的是，我正在谈论的问题来了。当我在 map 上单击鼠标并开始拖动它时，它是 不顺利这真的很烦人。所有的乐趣都消失了。

我使用 尝试了一些不同的场景。 Windows XP、Windows 7 和 Windows 8。我正在使用的浏览器是 最新版本的 Firefox、Chrome 和 IE .
以下是我尝试拖动 map 时的结果:

小屏幕分辨率 320x240:Firefox、Chrome 和 IE 处理得很好。不可能注意到拖动不顺畅。

小屏幕分辨率 320x240， map 上有 10 条折线:Chrome 和 IE 处理得很好，但如果您有使用 v2 API 的经验，您会注意到不同之处。 Firefox - 噩梦，拖动一点也不顺畅。

中等屏幕分辨率 1024x768。 Firefox - 有一些不一致的滞后。 Chrome 和 IE - 一种平滑的拖动，但如果你快速移动鼠标，情况会变得更糟。

中等屏幕分辨率 1024x768， map 上有 10 条折线。火狐——噩梦。 Chrome 和 IE - 你开始注意到有一些延迟，但同时它看起来有点流畅。

高屏幕分辨率 1920x1080。 Firefox - 巨大的滞后。 Chrome 和 IE - 稍微好一点，但仍然有明显的滞后。
6) 高屏幕分辨率 1920x1080， map 上有折线:Firefox、Chrome 广告 IE - NIGHTMARE。拖动 map 几乎是不可能的。

有趣的事实:

谷歌地图的 v2 API 不存在上述问题。

当鼠标移动小于每秒 50-60 像素时，上述问题不存在。拖动真的很流畅。当鼠标快速移动时，会出现滞后。

在 http://maps.google.com问题根本不存在，但是当我打开开发人员指南上的一些代码示例时，问题就在那里。这是一个例子:https://google-developers.appspot.com/maps/documentation/javascript/examples/full/circle-simple .

我认为我尽可能深入地描述了这个问题，无论我多么努力地试图绕过它，我都找不到任何解决方案。

如果有人就这个问题分享他们的意见，我会很高兴。

附言不幸的是，我没有 v2 的 key ，所以我无法创建一个示例，您可以在我的本地主机之外查看 map ，但我找到了一个并排比较的网站(v2 和 v3)。尝试拖动 map 以查看差异。

http://www.wolfpil.de/v2-v3-sidebyside.html

map 的分辨率非常小，很可能没有经验的用户可能看不到差异，所以我也会给你 map 的单独链接，你只需要使用 firebug 或类似的调试器来使 Canvas 分辨率更大。然后你会看到我在说什么。

map v2:http://www.wolfpil.de/v2.html

map v3:http://www.wolfpil.de/v3.html

Answer 1

我们遇到了将 CSS3 过渡添加到所有元素的问题。

所以删除过渡，它的工作正常..

参见示例:

#map * {
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: all 0s ease;
  transition: none;
}