jVectorMap中的滚动控件

Question

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

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

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

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

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

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

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

Answer 1

您需要两个步骤：

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);
     }
   });
   

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

您可以在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;

由于您还没有提供任何源代码，我无法提供更多帮助，但如果您已了解这一概念，则滚动条范围与地图转换之间的转换非常简单。