缩小拉斐尔世界地图

Question

我目前正在为项目网站创建一个启动页面。我被指示设计一个带有菜单的世界地图，并在子菜单上悬停时添加一些闪烁效果。

我已经完成了转换/缩放地图的工作，但是当我将鼠标悬停在子菜单上时会出现问题，小红圈不会弹出应该存在的位置。 如果没有.transform（）方法，小的红色圆圈会正确弹出，但它会给我一个很大的裁剪地图。

我使用.transform（）方法缩小世界地图。

我在这里放了.transform（）方法：

r.path(worldmap.shapes[country]).attr({stroke: "#9b59b6", fill: c, "stroke-opacity": 0.25}).transform("s.628,.740 0,0");

Here's the page with transform() method.

Here's the page without the transform() method.

Answer 1

在代码中，城市的所有位置都存储为名称属性中的lon / lat坐标。然后通过world.parseLatLon函数解析它，然后调用getXY（）。我会说在函数getXY中，返回的坐标也需要转换。有一些有趣的数字操作正在那里（乘以2.6938，然后加上465.4） - 我会说这是调整图像大小的坐标。现在你已经改变了图像的大小，这些也需要调整