如何在jVectorMap中设置标记图片宽高？解决markerStyle无效问题

我懂你遇到的困扰了——当用attribute: 'image'自定义marker图片时，markerStyle里的宽高设置确实不会生效，这是因为jVectorMap处理图片类型marker时，会优先采用图片本身尺寸或scale配置里的关联规则，而非markerStyle的initial样式。下面给你几个实用的解决办法：

方法1：在scale配置中直接指定图片尺寸 #

这是最贴合jVectorMap原生逻辑的方案，你可以把图片路径和宽高绑定在scale对象里，直接覆盖默认尺寸：

window.mapMarkers = [];
window.mapMarkers.push({ name: 'Test', coords: [12.345, 12.345] });

new jvm.Map({
  container: $('#map'),
  map: 'en',
  series: {
    markers: [{
      attribute: 'image',
      scale: {
        'marker': {
          url: 'marker.png',
          width: 42,
          height: 58
        }
      },
      values: window.mapMarkers.reduce(function(p, c, i) {
        p[i] = 'marker';
        return p;
      }, {})
    }]
  }
});

配置生效后，生成的marker元素会直接应用你设置的宽高参数。

方法2：用CSS强制覆盖样式 #

如果不想调整配置结构，也可以通过CSS选择器直接定位marker的SVG元素，强制设置宽高：

.jvectormap-marker {
  width: 42px !important;
  height: 58px !important;
}

要是需要针对特定marker设置，还可以给marker添加自定义类名，再精准选择：

markerStyle: {
  initial: {
    className: 'custom-marker'
  }
}

对应的CSS：

.custom-marker {
  width: 42px !important;
  height: 58px !important;
}

方法3：初始化后手动修改DOM元素 #

如果前两种方案不适用，还可以在地图加载完成后，遍历marker元素手动修改宽高属性：

const mapInstance = new jvm.Map({
  container: $('#map'),
  map: 'en',
  series: {
    markers: [{
      attribute: 'image',
      scale: { 'marker': 'marker.png' },
      values: window.mapMarkers.reduce(function(p, c, i) {
        p[i] = 'marker';
        return p;
      }, {})
    }]
  },
  onLoaded: function() {
    // 初始化完成后修改所有marker尺寸
    $('.jvectormap-marker').each(function() {
      $(this).attr({
        width: 42,
        height: 58
      });
    });
  }
});

其中方法1是最推荐的，它遵循jVectorMap的设计逻辑，不会有样式冲突的风险。

内容的提问来源于stack exchange，提问作者DevDavid