jVectorMap 增加（世界）地图大小

Question

我正在使用 http://jvectormap.owl-hollow.net/ 中的 jVectorMap，一切正常。但世界地图的标准尺寸非常小。如果有人想打例如波斯尼亚和黑塞哥维那，他需要大眼镜！有可用的缩放按钮，但您必须在容器内移动地图。

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

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

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

干杯!

Answer 1

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

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

我刚刚将scale:更改为3，这似乎有效

Answer 2

你只需要改变这些值：

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

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

您只需复制并调整该代码即可。

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