如何在jqvmap中实现并自定义点状世界地图

要把Jvectormap改成点状样式的世界地图，你可以通过隐藏原有地图区域、添加自定义标记点的方式实现，以下是修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.2/jquery-jvectormap.css" referrerpolicy="no-referrer" />
  <style>
    /* 自定义标记点样式 */
    .jvectormap-marker {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #2c3e50;
      border: 2px solid #fff;
      box-shadow: 0 0 3px rgba(0,0,0,0.3);
    }
    /* 隐藏地图区域的填充和边框 */
    .jvectormap-region {
      fill: transparent !important;
      stroke: transparent !important;
    }
  </style>
</head>
<body>
  <header>
    <h1>Dotted Jvectormap</h1>
  </header>
  <main>
    <div id="world-map-markers" style="height: 300px"></div>
    <hr>
    <p>最终效果参考：每个国家对应一个圆点标记，无原有地图轮廓，仅显示点状分布</p>
  </main>
</body>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap-next@3.1.1/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ika.jvectormap@1.0.0/jquery-jvectormap-world-mill-en.js"></script>
<script>
  $(function() {
    // 部分国家中心点经纬度数据（可根据需要补充完整）
    const countryMarkers = [
      { latLng: [39.9042, 116.4074], name: 'China' },
      { latLng: [37.0902, -95.7129], name: 'United States' },
      { latLng: [55.3781, -3.4360], name: 'United Kingdom' },
      { latLng: [41.8719, 12.5674], name: 'Italy' },
      { latLng: [35.6762, 139.6503], name: 'Japan' },
      { latLng: [-25.2744, 133.7751], name: 'Australia' },
      { latLng: [51.1657, 10.4515], name: 'Germany' },
      { latLng: [46.2276, 2.2137], name: 'France' }
      // 可继续添加其他国家的坐标
    ];

    $('#world-map-markers').vectorMap({
      map: 'world_mill_en',
      markers: countryMarkers,
      backgroundColor: '#f8f9fa',
      // 禁用地图区域交互
      regionStyle: {
        initial: {
          fill: 'transparent',
          stroke: 'transparent'
        }
      },
      markerStyle: {
        initial: {
          // 这里可以覆盖CSS样式，或者直接用CSS控制
        }
      }
    });
  });
</script>
</html>

关键修改说明： #

• 隐藏原有地图区域：通过CSS和regionStyle设置，将地图的填充色和边框设为透明，只保留标记点显示。
• 自定义标记样式：用CSS把标记点设置为圆形，调整大小、颜色和阴影，模拟点状效果。
• 添加国家标记点：准备每个国家的中心点经纬度数据，在初始化地图时加载这些标记，每个标记对应一个国家的位置。

如果需要更完整的国家坐标数据，可以自行收集补充到countryMarkers数组中，或者使用包含所有国家中心点的数据集。

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