当前位置:主页 > JavsScript库 > 其它 >

交互式矢量地图的JavaScript库 - jsvectormap
栏目分类:其它   发布日期:2021-09-03   浏览次数:

一个普通的 JavaScript 库,用于在页面上呈现交互式、动态、矢量形状的世界地图。

更多功能:

  • 可点击的国家、地区。

  • 自定义标记、标签和工具提示。

  • 平滑平移和缩放。

  • 自定义样式。

  • 触摸友好。

使用:

1.在 HTML 页面上加载jsvectormap.css和jsvectormap.js。

<link rel="stylesheet" href="./dist/css/jsvectormap.css" />
<script src="./dist/js/jsvectormap.min.js"></script>

2. 为矢量图创建一个占位符。

<div id="map"></div>

3. 将地图数据加载到文档中。

<script src="./dist/maps/world.js"></script> 
<script src="./dist/maps/canada.js"></script> 
...

4. 用可点击区域渲染世界地图。

var map = new JsVectorMap({ 
    map: 'world', // 'canada', ... 
    selector: '#map', 
})

5. 使用以下参数配置地图:

var map = new JsVectorMap({
    map: 'world',
    backgroundColor: 'tranparent',
    draggable: true,
    zoomButtons: true,
    zoomOnScroll: true,
    zoomOnScrollSpeed: 3,
    zoomMax: 12,
    zoomMin: 1,
    zoomAnimate: true,
    showTooltip: true,
    zoomStep: 1.5,
    bindTouchEvents: true,
    focusOn: {}, // 关注页面加载上的区域
    /**
     * 标记选项
     */
    markers: null, // 初始化期间要添加到地图的标记集
    markersSelectable: false,
    markersSelectableOne: false,
    markerStyle: {
      // 标记样式
      initial: {
        r: 7,
        fill: 'black',
        fillOpacity: 1,
        stroke: '#FFF',
        strokeWidth: 5,
        strokeOpacity: .65
      },
      hover: {
        fill: '#3cc0ff',
        stroke: '#5cc0ff',
        cursor: 'pointer',
        strokeWidth: 2
      },
      selected: {
        fill: 'blue'
      },
      selectedHover: {}
    },
    // 标记标签样式
    markerLabelStyle: {
      initial: {
        fontFamily: 'Verdana',
        fontSize: 12,
        fontWeight: 'bold',
        cursor: 'default',
        fill: 'black'
      },
      hover: {
        cursor: 'pointer'
      }
    },
    /**
     * 地域风格
     */
    labels: { // 为特定区域添加标签
      regions: {
        render(code) {
          return ['EG', 'KZ', 'CN'].indexOf(code) > -1 ? 'Hello ' + code : ''
        },
      }
    }
    regionsSelectable: false,
    regionsSelectableOne: false,
    regionStyle: {
      // 地域风格
      initial: {
        fill: '#e3eaef',
        fillOpacity: 1,
        stroke: 'none',
        strokeWidth: 0,
        strokeOpacity: 1
      },
      hover: {
        fillOpacity: .7,
        cursor: 'pointer'
      },
      selected: {
        fill: '#000'
      },
      selectedHover: {}
    },
    // 区域标签样式
    regionLabelStyle: {
      initial: {
        fontFamily: 'Verdana',
        fontSize: '12',
        fontWeight: 'bold',
        cursor: 'default',
        fill: '#35373e'
      },
      hover: {
        cursor: 'pointer'
      }
    },
 
    series: {
      markers: [
        // 您可以添加一个或多个对象来为标记创建系列。
      ]
      regions: [
        // 您可以添加一个或多个对象来为区域创建系列。
      ]
    }
})


6. 在页面加载时向地图添加标记。

var markers = [
    {
      name: '巴勒斯坦',
      coords: [31.5, 34.8],
    },
    {
      name: '俄罗斯',
      coords: [61, 105],
    },
    {
      name: '格陵兰岛',
      coords: [72, -42],
    },
    {
      name: '加拿大',
      coords: [56, -106],
    },
];
var map = new JsVectorMap({
    map: 'world',
    selector: '#map',
    regionsSelectable: true,
    markersSelectable: true,
    labels: {
      markers: {
        render: function (index) {
          return markers[index].name
        }
      }
    },
    markers: markers
})
// 或
map.addMarker('RU', {
  name: '俄罗斯',
  coords: [61, 105],
  label: '俄罗斯',
  offset: [15, 10]
})

7. API 方法。

// 设置/获取/清除选定区域
map.setSelected('regions', ['EG', 'RU', 'US']);
map.getSelectedRegions();
map.clearSelectedRegions();
// 设置/获取选定的标记
map.setSelected('markers', [0, 2, 3]);
map.getSelectedMarkers();
map.clearSelectedMarkers();
// 设置背景颜色
map.setBackgroundColor();
// 重置地图
map.reset();

8. 事件处理程序。

var map = new JsVectorMap({
    onLoaded: function (map) {
      window.addEventListener('resize', () => {
        map.updateSize()
      })
    },
    onViewportChange(scale, transX, transY) {
      // Do something
    }
    onRegionSelected: function (index, isSelected, selectedRegions) {
      console.log(index, isSelected, selectedRegions);
    },
    onMarkerSelected: function (code, isSelected, selectedMarkers) {
      console.log(code, isSelected, selectedMarkers)
    },
    onRegionTooltipShow: function (tooltip, code) {
      if (code === 'RU') {
        tooltip.selector.innerHTML = tooltip.text() + ' <b>(Hello Russia)</b>'
      }
    },
    onMarkerTooltipShow: function (tooltip, index) {
      tooltip.selector.innerHTML = '<h5 class="mb-0">'+tooltip.text()+'</h5>' + '<p class="mb-0">这里可以自定义.</p><small class="mb-0">这里可以自定义.</small>'
    },
})


官方网站:https://github.com/themustafaomar/jsvectormap

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库