标记是地图展示功能的一个基本需求,不过目前 JVectorMap 同一时刻只支持一种,使用方式:
标记数据格式为数组,元素为对象,包含纬经度和名称。
1 2 3 4 5 6 7 8 9 10 11 | var markersData = [ { "latLng" :[31.070561,119.686315], "name" : "槐坎乡" }, { "latLng" :[31.073384,119.559557], "name" : "新杭镇" }, ... ] |
配置中可以指定标记数据和样式,markerStyle表示标记样式,包含四种状态:初始化,悬浮状态,选中状态,选中悬浮时,可根据需求配置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $( '#world-map' ).vectorMap({ map: 'js_mill_cn' , markerStyle: { initial: { }, hover: { }, selected: { }, selectedHover: { } }, markers: markersData }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <! 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 > |
联系客服