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,

我只是改变了比例:到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);
    }
});

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