标记是地图展示功能的一个基本需求,不过目前 JVectorMap 同一时刻只支持一种,使用方式:
- 增加数据或者引入数据文件;
- 在配置中赋值;
数据格式
标记数据格式为数组,元素为对象,包含纬经度和名称。
var markersData = [ { "latLng":[31.070561,119.686315], "name":"槐坎乡" }, { "latLng":[31.073384,119.559557], "name":"新杭镇" }, ... ]
配置
配置中可以指定标记数据和样式,markerStyle表示标记样式,包含四种状态:初始化,悬浮状态,选中状态,选中悬浮时,可根据需求配置。
$('#world-map').vectorMap({ map: 'js_mill_cn', markerStyle: { initial: { }, hover: { }, selected: { }, selectedHover: { } }, markers: markersData });
示例完整代码
<!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" media="screen" href="../dist/assets/css/jquery-jmapplus.min.css" type="text/css"/> <script src="../bower_components/jquery/dist/jquery.min.js"></script> <script src="../bower_components/jquery-mousewheel/jquery.mousewheel.min.js"></script> <script src="../dist/assets/js/jquery-jmapplus.min.js"></script> <script src="../dist/assets/data/china/jquery-jmapplus-region-js-mill-cn.js"></script> <script src="../dist/assets/data/china/jquery-jmapplus-marker-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()); $('#world-map').vectorMap({ map: 'js_mill_cn', markerStyle: { initial: { fill: '#F8E23B', stroke: '#383f47', r: 3 } }, markers: markersData }); }); </script> </body> </html>
可否利用这标记用来动态的增加一个点呢