固定区域名称也是新增的功能,在每个区域的中心位置会展示区域的名字,显示固定名称时,悬浮名字会自动关闭。这需要地图数据的支持(<1.3.1版本数据不支持),目前在dist/assets/data/china
目录中的区域数据文件都支持此功能。另外使用转化器转化时(jmap-plus-converter)需要确保shapefile中有名字的经纬度。
聚焦是原本支持的功能,配置中指定需要聚焦的区域名称即可,视图初始化时会自动聚焦指定的区域,然后你可以点击缩放看完整地图。
配置
$('#world-map').vectorMap({ map: 'js_mill_cn', // 设置显示区域固定名字,默认为false showRegionLabel: true, // 设置区域聚焦点 focusOn: { scale: ['35','40'] } });
示例代码
<!DOCTYPE html> <html> <head> <title>jmap-plus example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link rel="stylesheet" href="query-jmapplus.min.css" type="text/css"/> <script src="js/jquery/jquery.min.js"></script> <script src="js/jquery/jquery.mousewheel.min.js"></script> <script src="js/jquery-jmapplus.min.js"></script> <script src="data/china/jquery-jmapplus-region-js-mill-cn.js"></script> </head> <body style="margin:auto"> <div id="world-map" style="width: 100%; height: 400px"></div> <script> $(function () { $('#world-map').height($(window).height()); var _focusRegion = ['35','40']; var map = new jvm.WorldMap({ map: 'js_mill_cn', container: $('#world-map'), regionStyle: { initial: { 'fill-opacity': 1, stroke: 'none', 'stroke-width': 0, 'stroke-opacity': 1 }, hover: { 'fill-opacity': 0.8 }, selected: { fill: '#f5d529' }, selectedHover: { } }, showRegionLabel: true, focusOn: { scale: _focusRegion } }); map.setSelectedRegions(_focusRegion); }); </script> </body> </html>
世界地图的国家名称怎么才能显示呢?小弟java盲,那个转化器实在无解,近期项目急求大神指教