缩小拉斐尔世界地图

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

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