简介
在当今时代，位置功能在移动应用中随处可见。无论是导航应用，还是兴趣点（POI）类功能，交互式地图元素都始终是其中的重要组成部分。
在本教程中，我们将使用 ProtoPie 中一系列简单的触发器来创建这样一个交互式地图。
你将学到什么
在本课中，你将学习如何：
使用 Pinch 触发器缩放元素/地图
使用 Rotate 触发器旋转地图
创建可拖拽的地图原型
为触发器和响应设置合理的约束
完成本教程后，你将能够制作出类似这样的效果！
分步说明
开始之前
请确保你已安装 ProtoPie 移动应用，以便将预览镜像到手机上，这会让原型测试变得容易得多，尤其是在引入 pinch 和 rotate 触发器之后。
需要注意的是，如果你的地图屏幕上方有任何元素，你需要在所选图层底部勾选“Make Lower Layers Touchable”复选框。
地图平移交互
1. 首先，我们要实现最常见的一种交互式地图交互：平移（pan）。为此，我们先添加一个 Drag 触发器并将其附加到 Map 元素。然后，我们为该触发器添加一个 Move 响应，同样附加到 Map。
完成后，你应该能够使用单指平移地图。
缩放地图
接下来，我们要创建另一个几乎所有交互式地图中都会出现的常见交互：缩放（Zoom）。
1. 要开始原型化这个功能，先添加一个 Pinch 触发器并将其附加到 Map 元素。
2. 与之前类似，我们现在添加一个附加到 Map 元素的响应，不过这次添加的是 Scale 响应，因为我们希望在捏合屏幕时改变地图缩放比例。
完成后，你应该会得到一张可缩放的地图。
旋转地图
第三种交互，我们将讲解如何旋转地图。这一步与前两种使用的方法完全相同。
1. 首先，给 Map 元素添加一个 Rotate 触发器，然后在其下方附加一个 Rotate 响应。
通过这些简单步骤，你就可以通过手指扭转来旋转地图了。
自身位置标记
你会发现，标记不会随着我们刚刚实现的触发器一起移动。
1. 要修复这一点，你需要创建一个新的容器（container），并将地图和你的位置标记都放进去。为了本教程，我们将其命名为 Map Container。
2. 之前我们将触发器和响应附加在地图图层上，但这些触发器只会影响地图。要让它们也作用于标记：
按住 Shift 并选择（点击）所有触发器，这样你就可以同时选择多个触发器
将受影响图层改为 Map Container
你需要逐个将响应的图层改为 Map Container，因为 Shift+点击无法让你选中不同触发器下的响应
完成后，你的地图和位置标记都应该会随触发器一起移动。
但是你会发现，在缩放时，地图和标记都会消失到左上角。这是由约束引起的。
约束（Constraints）
地图无法缩放是由于地图上设置了 Fixed Width 和 Fixed Height 约束。这会导致图片在其父容器中保持固定尺寸。
1. 为了解决这个问题，进入地图图层，找到约束设置并取消勾选 Fixed Width 选项。这样地图就可以随父容器一起缩放。
💡 你会注意到，这会自动取消勾选 Fixed Height，反之亦然。
这是因为该图层的尺寸被锁定了。这样会使图片在所有变换下都保持相同的纵横比。就本地图而言，我们希望保持锁定，因为我们希望地图保留其纵横比。
2. 对于位置标记，我们将宽高约束保留为固定（fixed），因为我们希望它在缩放时保持相同大小。
3. 为了让标记随地图移动并保持其在容器内的相对位置，只需取消选择任何边缘约束。现在你的地图应该可以正确地平移、缩放和旋转了！
限制（Limits）
在使用地图应用时，你通常会发现不能无限放大或缩小。
1. 在 ProtoPie 中我们也可以设置这些限制！要为缩放设置限制：
找到 Scale 响应。
定位到 Limit 部分
设置最小和最大像素宽高。就本教程而言，我们将最小值设为 1000x1000px，最大值设为 5000x5000px。
将最小值设为 1000x1000px，最大值设为 5000x5000px
现在如果你尝试缩放地图，会发现到达一定程度后，它会阻止你继续缩放。
2. 在 Move 响应中，也可以为平移效果设置类似限制！一种将范围限制在容器尺寸内的简单方式是将限制设置为 Limit to Screen。这将防止你超出容器边界。或者，如果你希望在平移时忽略图片的某个特定区域，也可以尝试 Custom Limits 选项！
恭喜！
你完成了！你已经创建了一个可扩展的图片预览！试着把它应用到你自己的设计概念中，看看你能将哪些想法变为现实！
