如何在 jVectorMap 中创建动画标记答案

【问题标题】：How to create an animated marker in jVectorMap如何在 jVectorMap 中创建动画标记
【发布时间】：2020-05-27 15:38:49
【问题描述】：

我想在 Jvector 地图上创建一个动画标记，我想使用这个具有不同颜色的 Bootstrap Growing Spinner 作为制造商我该怎么做。

我的 Jvector 地图代码：

jQuery.noConflict();
jQuery(function(){
  var $ = jQuery;
  $('#map').vectorMap({
    map: 'world_mill_en',
    panOnDrag: true,
    focusOn: {
      x: 0.5,
      y: 0.5,
      scale: 1,
      animate: true
    },
    series: {
      regions: [{
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial',
      }]
    },
    markerStyle: {
  initial: {
    fill: '#F8E23B',
  },
  hover: {
    stroke: '#4d53c9',
    "stroke-width": 2,
    cursor: 'pointer'
  },
  selected: {
    fill: 'blue !importanr'
  },

},

     backgroundColor: '#13acbf',
    markers: [
  {latLng: [41.90, 12.45], name: 'Location: Vatican City'},
  {latLng: [43.73, 7.41], name: ' Location: Monaco'},
  {latLng: [44.73, 7.42], name: ' Location: Monaco', style:{fill:'#ff1100'}},
  {latLng: [12.9716, 77.5946], name: 'Location: Bengaluru', style: {fill: '#258210'}},
  ]
  });
})

我通过添加 css 尝试了很多，但没有成功。

【问题讨论】：

标签： javascript jquery svg jvectormap

【解决方案1】：

多年来我一直想这样做，但我一直没有时间。

演示 #1：

$(document).ready(function() {

  var animatedIcon = '<svg width="40" height="40" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" fill="none" r="4" stroke="currentColor" stroke-width="3"><animate attributeName="stroke-width" from="3" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/> <animate attributeName="r" from="8" to="20" dur="1.5s" begin="0s" repeatCount="indefinite"/><animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/></circle></svg>',
      values = ["0"],
      locations = [{latLng: [35.45582, 139.68187], name: 'Diamond Princess'}];

  function addAniMarkers(map, locations, values) {
    var svg = $(animatedIcon)[0],
        circle = svg.firstChild,
        mapObj = $(map).vectorMap('get', 'mapObject'),
        svgRoot = mapObj.canvas.node,
        g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    mapObj.aniMarkers = [];
    for(var i=0, l=locations.length; i<l; i++) {
      var marker = locations[i],
          clone = circle.cloneNode(true);
      mapObj.addMarker(i, marker, []);
      mapObj.aniMarkers.push(clone);
      g.appendChild(clone);
    }
    svgRoot.appendChild(g);
    mapObj.series.markers[0].setValues(values); 
    $(mapObj.container).trigger("viewportChange");
  }

  function repositionAniMarkers(map) {
    var mapObj = $(map).vectorMap('get', 'mapObject'),
        markers = mapObj.markers,
        aniMarkers = mapObj.aniMarkers;
    for (var i in markers) {
      var point = mapObj.getMarkerPosition(markers[i].config),
          el = markers[i].element,
          cx = el.shape.node.getAttribute("cx"),
          cy = el.shape.node.getAttribute("cy"),
          clone = aniMarkers[i];
      clone.setAttribute("cx", cx);
      clone.setAttribute("cy", cy);
    }
  }

  $("#map").vectorMap({
    map: "world_mill_en",
    backgroundColor: "aliceblue",
    zoomOnScroll: true,
    regionStyle: {initial: {fill: "lightgrey"}},
    markerStyle: {initial: {fill: '#F8E23B', stroke: '#383f47'}},
    markers: [],
    series: {
        markers: [{
            attribute: 'fill',
            scale: {
                '0': '#ff0000'
            },
            values: [],
            }]
    },
    onViewportChange: function(event, scaleFactor) {
      repositionAniMarkers("#map");
    }
  });

  addAniMarkers("#map", locations, values);

});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>

<body>
  <div id="map" style="width: 600px; height: 400px"></div>
</body>

</html>

说明：

您需要获取动画 SVG 图标并将内容克隆到与地图标记相同的位置。之后，您可以对标记使用 jVectorMap fill 选项。就是这样。

演示 #2：

$(document).ready(function() {

  var markerIcon = '<svg width="40" height="40" viewbox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" fill="none" r="10" stroke="#000000" stroke-width="2"><animate attributeName="r" from="8" to="20" dur="1.5s" begin="0s" repeatCount="indefinite"/><animate attributeName="opacity" from="1" to="0" dur="1.5s" begin="0s" repeatCount="indefinite"/></circle><circle cx="20" cy="20" fill="pointColor" stroke="#000000" stroke-width="1" r="6"/></svg>';

  function imgFromSVG(svg, pointColor) {
    var newSVG = svg.replace(/pointColor/gi, pointColor);
    return 'data:image/svg+xml;charset=UTF-8,' + escape(newSVG);
  }

  $("#map").vectorMap({
    map: "world_mill_en",
    backgroundColor: "aliceblue",
    zoomOnScroll: true,
    regionStyle: {initial: {fill: "lightgrey"}},
    markerStyle: {initial: {fill: '#F8E23B', stroke: '#383f47'}},
    markers: [{latLng: [35.45582, 139.68187], name: 'Diamond Princess'}],
    series: {
      markers: [{
        attribute: 'image',
        scale: {
          '0': imgFromSVG(markerIcon, '#ff0000')
        },
        values: ['0'],
      }]
    }
  });

});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>

<body>
  <div id="map" style="width: 600px; height: 400px"></div>
</body>

</html>

说明：

您需要获取动画 SVG 图标并使用 jVectorMap image 选项作为标记。这样，您可以根据您的比例值调整 svg 属性。

顺便说一句，感谢bjornd 提供了出色的 jVectorMap。

【讨论】：