矢量地图 MDB Pro component

矢量地图-Bootstrap 5和Material Design 2.0插件

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

您可以使用大多数可用选项自动初始化地图,而无需任何其他操作 JavaScript-只需将类vector-map添加到div元素并通过设置属性 data-mdb属性。

注意:对地图进行颜色编码需要JavaScript初始化。

Selected: Canada


地图

检出 API 标签以了解有关可用地图的更多信息。


只读

readonly 属性设置为 true 将禁用选择 地区。

Select region:

带图例的彩色地图

可以使用 colorCode 数组进行颜色编码-每个对象都包含 以下键: fill (代表颜色的字符串)和 regions -数组 区域的ID。

注意:添加 hover:false 以在鼠标悬停时禁用填充更改。

Annual growth:
  • 0-4%
  • 4-12%
  • 12-25%
  • 25-50%
  • 50-75%
  • > 75%

来自API的数据和自定义工具提示

要自定义工具提示,您需要将 options.colorMap.regions 设置为 对象(而不是字符串)。每个对象应包含两个键- id (区域的ID)和 tooltip (其他工具提示的内容)。

Population:

    自定义缩放

    向量图可自定义缩放行为(最大,最小和步进值)。


    禁用缩放事件

    zoomEvents 选项设置为 false 将禁用缩放 轮/捏事件。


    自定义SVG地图

    可以将您的自定义SVG地图与VectorMap组件一起使用-只需记住设置即可 每个路径的 id name (或 title )属性。


    别针

    添加图钉需要定义x和y坐标-这些值将定位您的标记 相对于SVG元素。

    由于Vector Map组件可以处理多种地图,因此无法定位图钉 使用经度和纬度。


    Bullets

    添加项目符号需要定义x和y坐标-这些值将定位您的标记 相对于SVG元素。

    由于矢量地图组件可以处理多种地图,因此无法放置项目符号 使用经度和纬度。


    Advanced data vizualization

    Use buttons to toggle between displays (fill / pulsating bullets) and datasets (sales, employees, annual profit increase, sales increase)





    矢量地图 - API


    用法

    通过数据属性

    可以通过data-mdb-attributes设置除 colorMap 之外的所有选项。

    
            <div class="vector-map" data-mdb-readonly="true" data-mdb-stroke="#fff"></div>     
          

    通过JavaScript

    
            const map = document.getElementById('my-map');
    
            new VectorMap(map, { readonly: true, stroke: '#fff', colorMap: [{ fill: '#E0E0E0', regions: ['GB', 'PL']}] })
          

    通过jQuery

    注意:默认情况下,MDB 包含jQuery,并且您拥有 自行添加到项目中。

    
            $('#my-map').vectorMap('select', 'CN');   
          

    选件

    可以通过数据属性,JavaScript或jQuery传递选项。对于数据属性,附加 选项名称为 data-mdb-,如 data-mdb-select-fill =“”

    Name Type Default Description
    btnClass String 'btn-dark' Classname for toolbar buttons
    colorMap Array [] Allows to create a custom fill and tooltips for an array of regions
    fill String '#E0E0E0' Sets the region's default fill
    fillOpacity Number 1 Sets the default fill's opacity
    hover Boolean true Changes a path's fill on hover
    hoverFill String '#BDBDBD' Sets the fill's value on hover
    map String 'world' Selects the map (available options: world, europer, worldPacific, africa, northAmerica)
    markers Array [] Adds markers (pins/bullets) to your map
    markerFill String '#757575 Sets the default marker's fill
    markerStroke String '#000 Sets the default marker's stroke
    markerInnerFill String 'rgba(0, 0, 0, 0.3)' Sets the default fill for the pin's inner circle
    markerStrokeWidth Number 1.2 Sets the default marker's stroke width
    readonly Boolean false Disables selecting regions
    scale Number 1 Sets the map's initial scale
    selectFill String '#B23CFD' Sets the selection's color
    selectRegion String - Sets the initial selection (the value has to correspond to a region's ID - f.e. alpha2Code)
    stroke String '#000' Sets a stroke's color
    strokeLinejoin String 'round' Sets a stroke's linejoin
    strokeOpacity Number 1 Sets a stroke's opacity
    strokeWidth Number 0.5 Sets a stroke's width
    tooltips Boolean true Enables/disabled tooltips
    width String/Number Sets the SVG element's width property
    height String/Number Sets the SVG element's height property
    zoomEvents Boolean true Enables/disables zoom events (wheel, pinch)
    zoomMax Number Sets the maximum for the scale
    zoomMin Number 1 Sets the minimum for the scale
    zoomStep Number 0.5 Sets the zoom's step (buttons)

    标记选项

    可以为 markers 数组中的每个对象设置这些选项

    Name Type Default Description
    type String 'pin' Changes the type of marker - available options: 'pin', 'bullet'
    x Number 0 x coordinate
    y Number 0 y coordinate
    r (type="bullet") Number 5 bullet's radius
    fill String marker's main fill (if not provided, the general option markerFill will be used)
    stroke String marker's stroke (if not provided, the general option markerStroke will be used)
    strokeWidth Number marker's stroke width (if not provided, the general option markerStrokeWidth will be used)
    innerFill (type="pin") String marker's inner fill (if not provided, the general option markerInnerFill will be used)

    内置地图

    矢量地图组件提供了几种内置地图:

    • world
    • europe
    • worldPacific
    • africa
    • northAmerica

    Most of them use alpha2Code as a country's ID (list), but those with subdivisions use regional codes (ISO 3166).


    方法

    Name Parameters Description Example
    select Selects a map's region - the argument has to correspond to a region's ID (f.e. alpha2Code) instance.select('PL')
    dispose Removes the VectorMap instance. instance.dispose()
    update Update the instance's options instance.update({ colorMap: [] })
    getInstance element Static method which allows to get the vectorMap instance associated with a DOM element. VectorMap.getInstance(element)
    
            const map = document.getElementById('my-map');
            const instance = VectorMap.getInstance(map);
            instance.select('GB');
          

    大事记

    Name Description
    select Emitted after selecting a region
    markerClick.mdb.vectorMap Emitted after clicking on a marker. You can access the marker with event.marker.
    
            const map = document.getElementById('my-map');
            map.addEventListener('select', (e) => {
              console.log(e.selected)
            });
          

    进口

    MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:

    
            import { VectorMap } from 'mdb-vector-maps';