Question

我正在使用JQVMAP生成一些美国地图。该插件有一个onRegionClick回调。我正在尝试放大此功能中的单击状态。我有点想知道如何通过将返回给我的SVG路径转换为onClick到viewBox坐标，但是，我在转换时遇到了问题。这是我到目前为止所拥有的。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap(
    {
        map: 'usa_en',
        backgroundColor: '#a5bfdd',
        borderColor: '#818181',
        borderOpacity: .50,
        borderWidth: 1,
        color: '#f4f3f0',
        enableZoom: false,
        hoverColor: '#c9dfaf',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        scaleColors: ['#b6d6ff', '#005ace'],
        selectedColor: '#c9dfaf',
        selectedRegion: null,
        showTooltip: true,
        onRegionClick: function(element, code, region)
        {
            //$('#vmap > svg')[0].setAttribute('viewBox', vmlPath);
            console.log(region.path);
            console.log(region.name);
        }
    });
});
</script>

Link to live demo。如何将SVG路径转换为viewBox坐标？我是以正确的方式来做这件事的吗？或者有更好的方法吗？我的最终目标是放大关于Region Click的状态。

Answer 1

你想要完成的事情非常困难。 SVG路径（尤其是您正在处理的路径的大小）很难解析。您可以从路径中解析的最有意义的事情是第一个值（值是逗号分隔的）。该值将以“m”或“M”开头。小写字母m是相对起始点，大写字母M是绝对起点。

有人说，一旦你知道路径的起点，就可以开始设置你的viewBox了。但是，您仍然没有路径的宽度和高度（德克萨斯路径大于罗德岛路径）。所以，你可以设置viewBox的起点，但不知道它有多大，解析出这些信息将是一场噩梦！

最好的方法是找出viewBox对每个州的含义，并将其包含在每个州的jquery.vmap.usa.js对象信息中。因此每个对象都有一个路径，一个名称和一个viewBox。然后，您可以通过调用onRegionClick在region.viewBox事件中抓住它。

除此之外，这是我能想到的最好的：

var showAll = false;
    jQuery(document).ready(function () {
        jQuery('#vmap').vectorMap(
    {
        map: 'usa_en',
        backgroundColor: '#a5bfdd',
        borderColor: '#818181',
        borderOpacity: .50,
        borderWidth: 1,
        color: '#f4f3f0',
        enableZoom: false,
        hoverColor: '#c9dfaf',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        scaleColors: ['#b6d6ff', '#005ace'],
        selectedColor: '#c9dfaf',
        selectedRegion: null,
        showTooltip: true,
        onRegionClick: function (element, code, region) {
            $('path').each(function () {
                if (showAll) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            if (showAll) { showAll = false; } else { showAll = true; }

            var id = '#jqvmap1_' + code;
            $(id).show();
        }
    });
    });

Answer 2

您可以使用jVectorMap，从中派生jqvmap。其API具有focusOn方法可缩放到地图上的指定区域。该区域可以通过坐标或区域代码指定。

SVG到viewBox坐标

2 个答案: