jVectorMap 中的滚动控件

Question

我正在使用 jVectorMap，无需缩放，一切正常。

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

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

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

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

我在网上看到了下图的地图

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

Answer 1

您需要两个步骤：

要了解地图在容器内的转换方式，请使用 onViewportChange 事件初始化地图：

$("#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);
  }
});

重点：要应用地图翻译，请设置所需的 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 的伟大作者。

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

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

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

jVectorMap 中的滚动控件

Scroll control in jVectorMap

javascript

css

jquery

angularjs

jvectormap