jVectorMap中的滚动控件

Question

我正在使用jVectorMap，一切正常，没有缩放。

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

我试图添加overflow-y: scroll;和其他许多选项来进行滚动但没有任何效果。

我可以设置div的宽度和高度来获取滚动条，但它与地图放大和缩小无关。

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

我在互联网上看到了一张带有下图的地图

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

Answer 1

你需要两个步骤：

1. 要了解如何在容器内翻译地图，请使用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. 要点：要应用地图转换，设置所需的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

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

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

---

最后，重新居中按钮：您可以按如下方式获取地图的中心：

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

---

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