Question

我正在使用jq-plugin矢量图来显示鼠标悬停时突出显示的地图。单击某个国家/地区时，应放大该国家/地区。我的问题是我无法找到如何获取所点击国家/地区的尺寸（最小/最大x / y坐标），以便我可以正确地缩放它以覆盖可用的屏幕区域。

创建地图的输入数据是一个数组，其元素具有以下格式：

'lu': { 'lock':1, 'type':'country', 'name': 'Luxembourg', 'path': 'M233.7,335.91l-2.56,3.47l-1.08,5.64 c0.16,0.02,0.31,0.05,0.48,0.05c1.96-0.08,3.24-0.59,4.86,0c0.02,0.01,0.03,0.01,0.04,0.02l0.47-3.6L233.7,335.91z' }

我以前没有使用svg或使用过此插件的经验，所以也许有一个我看不到的明显解决方案。

也欢迎不依赖此jq插件的替代解决方案的建议。

Answer 1

如果path是引用路径元素的变量，则path.getBBox()将返回以下表单中的对象：

{
    x      : ...
    y      : ...
    width  : ...
    height : ...
}

x和y代表左上角。对于缩放，您可以将包装svg元素上的viewBox属性设置为viewBox="x y width height"。我的意思是这样的：

svg  = document.querySelector('svg');
path = svg.querySelector('path');
box  = path.getBBox();
svg.setAttributeNS(null, 'viewBox', box.x +' '+ box.y +' '+ box.width +' '+ box.height);

jQuery vector-map插件：获取国家/地区的维度

1 个答案: