JVectorMap 设置比例低于 1

Question

我正在创建一个需要全尺寸地图的网页，为此我使用了 JVectorMap。地图的宽度和高度均为 100%。但是，这会使地图在完全缩小时直接延伸到页面的边缘，这是不希望的。理想情况下，当完全缩小时，地图周围会有一个边框，但当放大时，地图仍会延伸到页面边缘。从本质上讲，我想从地图开始时缩小到比允许的范围更小。

在这种情况下，无法使用 HTML 边框和内边距，因为尽管它们确实对页面加载产生了预期的效果，但当地图放大时边框仍然存在。我唯一的想法是尝试将以下代码末尾附近的 'scale' 变量设置为小于零的值：

<script>
    $(function(){
        $('#map').vectorMap({
            map: 'world_mill',
            focusOn: {
                x: 0.5,
                y: 0.5,
                scale: 0.8
            }
        });
    });
</script>

这没有效果，因为任何低于 1 的 'scale' 值似乎都被忽略了。我在下面附上了屏幕截图来说明问题。

当前页面（地图延伸到边缘）

理想页面（地图有边框

如有任何帮助，我们将不胜感激！

Answer 1

我将 post 回答我自己的问题，以防万一以后有人偶然发现这个问题。似乎 setScale 只能将缩放设置为 zoomMin 和 zoomMax 参数之间的值，因此通过将 zoomMin 降低到 0.9 我能够成功使用 setScale 也将缩放缩小到 0.9。

因此我得到的最终代码是：

$(function(){
    $('#map').vectorMap({
        map: 'world_mill',
        zoomMin: 0.9,
        focusOn: {
            x: 0.5,
            y: 0.5,
            scale: 0.9
        },
    });
});

JVectorMap 设置比例低于 1

JVectorMap Set Scale Below 1

html

javascript

css

jquery

jvectormap