7

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

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

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

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

干杯!

4

4 回答 4

7

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

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

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

于 2012-06-22T09:15:09.803 回答
5

你只需要改变这些值：

$('#world-map').vectorMap({
        map: 'chile',
           focusOn: {
       x: 0.6,
       y: -0.2,
       scale: 2
     },
于 2015-12-10T23:30:01.090 回答
2

要使其成为更大的世界地图，只需调整容器的大小。

如果要默认放大，则缩放按钮绑定到以下代码：

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

您可以简单地复制和调整该代码。

于 2011-10-14T07:58:00.563 回答
0

这是为我做的

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);
于 2017-09-13T12:14:54.660 回答