0

我正在使用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>

链接到现场演示。如何将 SVG 路径转换为 ​​viewBox 坐标？我会以正确的方式解决这个问题吗？还是有更好的方法来做到这一点？我的最终目标是放大 onRegionClick 的状态。

4

2 回答 2

1

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

于 2012-11-27T09:54:18.157 回答
1

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

话虽如此，一旦你知道路径从哪里开始，你就可以开始设置你的 viewBox。但是，您仍然不知道路径的宽度和高度（德克萨斯路径大于罗德岛路径）。因此，您可以设置 viewBox 的起点，但不知道要设置多大，解析该信息将是一场噩梦！

最好的方法是找出每个状态的 viewBox 是什么，并将其包含在jquery.vmap.usa.js每个状态的对象信息中。所以每个对象都有一个路径、一个名称和一个视图框。然后你可以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();
        }
    });
    });
于 2012-11-21T17:05:35.317 回答