javascript - jVectorMap 中的滚动控件

Question

我正在使用 jVectorMap，无需缩放即可正常工作。

但是当用户放大页面时，我需要允许用户使用垂直和水平滚动条滚动 map 。

我尝试添加 overflow-y: scroll; 和其他许多选项来进行滚动，但没有一个是完美的。

我可以通过设置div的宽高来获取滚动条，但与 map 放大缩小无关。

所以我期待一个水平和垂直的滚动条，即使它被缩放，使用该用户也可以看到完整的 map 。

我在网上看到了一张有下图的 map

但不知道如何在 jVector map 中添加这样的滚动按钮控件。有人可以帮我解决这个问题吗？

Answer 1

你需要两个步骤:

1. 要了解 map 在容器内的转换方式，请使用 onViewportChange 事件初始化 map :

   $("#map").vectorMap({
     map: "world_mill",
     // set map properties, series, and so on
     //...
     onViewportChange: function(event, scaleFactor,transX,transY){
       // look at the values here:
       console.log("Viewport changed",scaleFactor,transX,transY);
     }
   });
   

2. 重点:要应用 map 转换，请设置所需的 X 和 Y 平移，最后调用 applyTransform 函数:

   例子:

   var worldMap = $("#map").vectorMap("get", "mapObject");
   worldMap.transX = -100;
   worldMap.applyTransform();
   

---

附加信息:

幸运的是，jVectorMap 会为你做范围检查，所以对于你的平移按钮，你也可以简单地使用类似的东西:

worldMap.transX -= (10 * worldMap.scale); // move left
worldMap.transX += (10 * worldMap.scale); // move right
worldMap.transY -= (10 * worldMap.scale); // move up
worldMap.transY += (10 * worldMap.scale); // move down

您将在 jVectorMap source code 的 applyTransform 函数中找到范围检查.

致谢:Kirill Lebedev ，jVectorMap 的伟大作者。

---

最后，重新居中按钮:可以通过如下方式获取 map 的中心:

var mapCX = (worldMap.width / 2) * worldMap.scale + worldMap.transX * worldMap.scale;
var mapCY = (worldMap.height / 2) * worldMap.scale + worldMap.transY * worldMap.scale;

---

由于您没有提供任何源代码，我无法提供更多帮助，但是如果您理解了这个概念，那么滚动条范围和 map 翻译之间的转换就很容易了。