如何使用多个图标优化可滚动/可缩放的地图？

Question

我目前正在使用Phonegap开发移动应用。该应用程序的一个组件是地图视图，而不是谷歌地图，但使用javascript（zynga-scroller）可滚动/缩放的自定义图形。滚动/缩放通过translate3d和scale进行。

可滚动/可缩放图像上方的一层有图标和/或弹出窗口，这些图标和/或弹出窗口不是通过缩放转换的，而是仅使用坐标乘以比例的translate3d进行转换。

因为在滚动/缩放时必须计算并应用每个帧上的每个元素的计算，在较慢的设备上，地图变得有点慢。没有图标或仅有一些图标，它真的很快。

到目前为止，我有一个优化这一点的想法：

• transformOrigin

  尝试将图标的坐标设置为transformOrigin，因此我只需要在缩放时更新这些值。这不起作用，因为transformOrigin似乎只适用于百分比值。如果似乎没有其他可能性，我也可以计算它们。

还有什么我忽略的吗？某些属性会阻止比例应用于某些元素，例如？

Answer 1

我不确定我是否正确解释了我的问题，但现在我找到了以下解决方案：

现在我将所有图标放在与地图图像本身相同的容器中。放大缩放级别0.3时，scale(0.3)将应用于容器。要将图标保留为之前的大小，我会通过将scale( 1 / zoomlevel )应用于图标来中和比例。

这样，只需在缩放时重新计算图标的样式，并且地图在较慢的设备上感觉更具响应性，尤其是在滚动时。