如何制作类似谷歌地图的界面

Question

您好，我想从非常高分辨率的地图创建一个类似谷歌地图的界面。例如。 11k x 11k 分辨率。我的目标是能够平移/缩放并将图钉放在地图上所需的位置。我能够使用 mapbox 插件实现图像的缩放/平移。我的问题是如何在图像上的 (x,y) 位置放置图钉并在放大/缩小时保留图钉。

谢谢

Answer 1

最简单的方法是将整个图像视为 11k x 11k 的网格，右上角为 (0,0)。然后，引脚将位于 (x,y)。然后，当您缩放图像时，您将新视图视为主网格的子集。

例如，它可能从 (5000, 3500) 开始，大小为 500 x 500 像素。然后，如果引脚在这些坐标中，您就可以计算放置它的位置。

假设您有两个引脚：{(5230, 3550), (5400, 3700)}。

现在，如果您放大 5000、3500 并且视口为 500x500，则您的引脚实际位置是：

{(230, 3550), (5400, 3700)}

您需要准确进行翻译的方式会因您处理缩放/平移的准确程度而异，但这应该是总体思路。