1. 首页
  2. css

CSS用MapSVG在WordPress中创建交互式地图

WordPress的MapSVG插件允许您通过智能管理UI快速创建功能丰富的交互式地图。当您需要可视化对特定位置的影响时,交互式地图是项目的常见要求。如果您已经使用WordPress,那么这个全面的插件可以作为生产就绪地图的解决方案。
想想您上次实现或确定交互式地图的范围是什么时候。您可能需要花费大量的时间将数据从原始源映射到JSON以连接到可视化框架,如D3。然后是配置用户如何与地图本身交互。这些已经是重要的开发提升。
接下来的问题是如何管理地图数据。它是否存在于外部文件中?是否需要常规API调用来获取数据?直接在网站的WordPress管理员中管理这些数据会比管理其他网站内容容易得多。不需要打开一个代码编辑器和维护地图分开!
这些以及许多其他常见的地图功能都会被放入MapSVG插件中,供您创建多个独特的地图,以满足您的可视化需求。我们将深入研究这个插件,并使用它在WordPress中构建一个基于SVG的交互式地图创建新地图的选项一旦安装,MapSVG将为您提供五个基于矢量、图像或Google地图功能创建新地图的选项。在本文中,我将重点介绍SVG特性。在SVG、平面图像和谷歌地图之间进行选择,作为每个新地图的基础。
在新SVG地图选项中,有近200个国家和地区的地理校准和未校准矢量地图。这个插件的免费版本MapSVG-Lite允许站点管理员通过工具提示、可自定义的详细视图和按纬度/经度坐标放置的标记创建交互式地图。升级到付费版本($46)提供了以下支持:地图目录、集成搜索、位置过滤器、地图区域的详细视图、与WordPress帖子和高级自定义字段的集成、自定义工具提示和choropleth地图,以及其他高级功能。创建新地图一种新的基于SVG的地图。从下拉列表中选择一个选项以创建矢量贴图。尽可能选择地理校准的地图,而不是未校准的地图。地理校准地图更新,并有地区标题。此外,它们还允许您按地理坐标(即纬度和经度)添加地图标记,或输入自动转换为坐标的地址。
如果使用自己的自定义SVG文件,请选择上载SVG选项。上载后,您的自定义文件将出现在用户上载/your file下的New SVG Map下拉列表中-名称.svg。在将文件上传到插件地图之前,我建议您执行一些额外的步骤来优化文件:
1. 包含多个矢量路径的区域(例如夏威夷)需要在Illustrator中分组为复合路径。在Illustrator中,这可以通过选择相关路径来完成,然后转到对象>复合路径>生成(或CMD+8)。
2. 确保图层清晰,唯一的名称。图层名将用作区域{{id}},用于模板和组织目的。
3. 接下来,在文本编辑器中打开SVG文件,并为每个路径指定一个title属性。这将用作模板中的区域{{title}}。

CSS用MapSVG在WordPress中创建交互式地图 为WP2原创文章,链接:https://www.wp2.cn/css/css%e7%94%a8mapsvg%e5%9c%a8wordpress%e4%b8%ad%e5%88%9b%e5%bb%ba%e4%ba%a4%e4%ba%92%e5%bc%8f%e5%9c%b0%e5%9b%be/