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,

我刚刚改变了比例：到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);

jVectorMap增加（世界）地图大小

4 个答案: