Javascript 如何优化具有多个图标的可滚动/可缩放地图？

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

translate3d

和

scale

进行

在可滚动/可缩放图像上方的一层中，图标和/或弹出框不会通过缩放进行转换，而只能通过坐标与缩放相乘的

translate3d

进行转换

因为在滚动/缩放时，计算必须计算并应用于每帧上的每个元素，所以在速度较慢的设备上，贴图会变得有点慢。没有图标或者只有几个图标，速度真的很快

到目前为止，我有以下想法对其进行一些优化：

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

---

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

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

现在，我把所有的图标都放在地图图像本身所在的容器中。当您放大到zoomlevel

0.3

时，

scale（0.3）

将应用于容器。为了使图标保持原来的大小，我通过对图标应用

scale（1/zoomlevel）

来中和比例

这样，图标的样式只需要在缩放时重新计算，在速度较慢的设备上，尤其是在滚动时，地图的响应速度会更快