JVectorMap设置比例小于1

Dan*_*Dan 3 html javascript css jquery jvectormap

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

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

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

这没有影响,因为似乎小于1的“比例”的任何值。我提供了以下屏幕截图来说明问题。

当前页面(地图延伸到边缘) 当前页面(地图延伸到边缘)

理想页面(地图带有边框 理想页面(地图带有边框)

任何帮助将非常感激!

Dan*_*Dan 5

我将发布自己的问题的答案,以防将来有人偶然发现此问题。似乎setScale只能将zoom设置为zoomMinzoomMax参数之间的值,因此通过降低zoomMin到0.9,我也成功地使用setScale了将zoom降低到0.9的功能。

因此,我最终得到的最终代码是:

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

  • 谢谢你!差不多四年后,我偶然发现了这一点。:-D (2认同)