JVectorMap 标记图

raid 前端开发

标记是地图展示功能的一个基本需求，不过目前 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>

演示

raid

One thought on “JVectorMap 标记图”

发表评论