jVectorMap增加（世界）地图大小

Question

我正在使用来自http://jvectormap.owl-hollow.net/的jVectorMap，一切正常。但是，世界地图的标准大小非常小。如果有人想选择波斯尼亚和黑塞哥维那，他需要使用大眼镜！虽然存在缩放按钮，但是您需要在容器内移动地图。

我尝试扩大div元素，但似乎地图具有固定大小。 为了帮助我提供更大的世界地图：

• 当用户进入地图网站时，是否有机会获得不同的标准缩放比例？
• 我需要一个更大的世界地图吗？

或者，我还能做什么来提供更大的世界地图？

干杯！

- Ajin

Answer 1

文件jquery-jvectormap.js中的代码如下：

……

WorldMap.prototype = {
  transX: 0,
  transY: 0,
  scale: 1,
  baseTransX: 0,
  baseTransY: 0,
  baseScale: 1,

我刚刚把“scale:”改成了3，看起来似乎可以正常工作。

- Steve

---

@Ajin 这应该被标记为答案，仍然适用于2016年。 - EpicJoker

Answer 2

您只需要更改这些值：

$('#world-map').vectorMap({
        map: 'chile',
           focusOn: {
       x: 0.6,
       y: -0.2,
       scale: 2
     },

- Manuel Suricastro

---

欢迎来到 Stack Overflow！请添加一些说明，解释为什么或者如何这段代码可以帮助提问者。这将有助于给未来的观众提供一个可以学习的答案。请查看[答案]以获取更多信息。 - Heretic Monkey

最好不要修改jquery-jvectormap.js代码，而是像API显示的那样指定水平和垂直（x和y）坐标：params.x-从0到1的数字，指定视口中心点的水平坐标。 - fraktal12

Answer 3

如果你想要一个更大的世界地图，只需要调整容器的大小。

如果你想默认缩放地图，缩放按钮绑定了以下代码：

this.container.find('.jvectormap-zoomin').click(function(){
    if (map.zoomCurStep < map.zoomMaxStep) {
        var curTransX = map.transX;
        var curTransY = map.transY;
        var curScale = map.scale;
        map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
        map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
        map.setScale(map.scale * map.zoomStep);
        map.zoomCurStep++;
        $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) - sliderDelta);
    }
});
this.container.find('.jvectormap-zoomout').click(function(){
    if (map.zoomCurStep > 1) {
        var curTransX = map.transX;
        var curTransY = map.transY;
        var curScale = map.scale;
        map.transX += (map.width / (map.scale / map.zoomStep) - map.width / map.scale) / 2;
        map.transY += (map.height / (map.scale / map.zoomStep) - map.height / map.scale) / 2;
        map.setScale(map.scale / map.zoomStep);
        map.zoomCurStep--;
        $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) + sliderDelta);
    }
});

你可以直接复制并调整那段代码。

- pgl

Answer 4

这对我有用

var mapParams = {
            map: 'world_en',
            backgroundColor: '#FAFBFC',
            color: '#f2f4f6',
            borderColor: '#D1D4D7',
            borderOpacity: 0.7,
            values: mapData,
            scaleColors: ["#4671E0", "#5AA6F0"],
            normalizeFunction: 'polynomial',
            onLoad: function(event, map)
            {
                jQuery('#map-email-opens').vectorMap('zoomIn');
            }
        }

        $('#map-email-opens').vectorMap(mapParams);

- Josh D.