jmap地图特效

2016-05-30 22:26:21  访问(1741) 赞(0) 踩(0)


相关下载：jmap_plus_master.zip     

  • 示例链接

  • <!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="../lib/jquery-jmapplus.min.css" type="text/css"/>
  <script src="../lib/jquery.min.js"></script>
  <script src="../lib/jquery.mousewheel.min.js"></script>
  <script src="../lib/jquery-jmapplus.min.js"></script>
  <script src="../lib/jquery-jvectormap-world-mill-en.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();
  });
</script>
</body>
</html>

  • <!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="../lib/jquery-jmapplus.min.css" type="text/css"/>
  <script src="../lib/jquery.min.js"></script>
  <script src="../lib/jquery.mousewheel.min.js"></script>
  <script src="../lib/jquery-jmapplus.min.js"></script>
  <script src="../lib/jquery-jvectormap-world-mill-en.js"></script>
  <script src="../lib/gdp-data.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: 'world_mill_en',
      series: {
        regions: [
          {
            values: gdpData,
            scale: ['#C8EEFF', '#0071A4'],
            normalizeFunction: 'polynomial'
          }
        ]
      },
      onRegionLabelShow: function (e, el, code) {
        var _gdp = gdpData[code] == undefined ? 0 : gdpData[code];
        el.html(el.html() + ' (GDP - ' + _gdp + ')');
      }
    });
  });
</script>
</body>
</html>

  • <!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="../lib/jquery-jmapplus.min.css" type="text/css"/>
  <script src="../lib/jquery.min.js"></script>
  <script src="../lib/jquery.mousewheel.min.js"></script>
  <script src="../lib/jquery-jmapplus.min.js"></script>
  <script src="../lib/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());
    $('#world-map').vectorMap({
      map: 'js_mill_cn',
      showRegionLabel: true
    });
  });
</script>
</body>
</html>

  • <!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="../lib/jquery-jmapplus.min.css" type="text/css"/>
  <script src="../lib/jquery.min.js"></script>
  <script src="../lib/jquery.mousewheel.min.js"></script>
  <script src="../lib/jquery-jmapplus.min.js"></script>
  <script src="../lib/jquery-jmapplus-region-js-mill-cn.js"></script>
  <script src="../lib/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>

  • <!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="../lib/jquery-jmapplus.min.css" type="text/css"/>
  <script src="../lib/jquery.min.js"></script>
  <script src="../lib/jquery.mousewheel.min.js"></script>
  <script src="../lib/jquery-jmapplus.min.js"></script>
  <script src="../lib/jquery-jmapplus-region-js-mill-cn.js"></script>
  <script src="../lib/jquery-jmapplus-line-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',
      lines: lineData,
      showRegionLabel: true
    });
  });
</script>
</body>
</html>

  • <!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="../lib/jquery-jmapplus.min.css" type="text/css"/>
  <script src="../lib/jquery.min.js"></script>
  <script src="../lib/jquery.mousewheel.min.js"></script>
  <script src="../lib/jquery-jmapplus.min.js"></script>
  <script src="../lib/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>

上一条：

下一条：


 

相关评论

评论加载中……
 

发表评论

类型：
内容：
  (Alt+Enter)
 
  ┈全部┈  
 
（显示全部分类）