使用jVectormap仅展示美荷新三国并添加可点击跳转标记的技术问询

Absolutely! jVectormap has all the tools you need to pull this off—here's a step-by-step breakdown to make it happen:

First, you'll need to configure the map to render only the US, Netherlands, and Singapore. You can do this by hiding all regions on load, then explicitly showing your target countries using their ISO 3166-1 alpha-2 codes (US, NL, SG):

$('#world-map').vectorMap({
  map: 'world_mill',
  backgroundColor: '#ffffff',
  onLoad: function(event, map) {
    // Hide all countries initially
    map.hideRegions();
    // Show only your target countries
    map.showRegions(['US', 'NL', 'SG']);
  }
});

Next, use the markers option to place pins at your office locations, and hook up click events to handle page navigation. You can store the target URL directly in each marker's configuration:

$('#world-map').vectorMap({
  map: 'world_mill',
  backgroundColor: '#ffffff',
  // Define markers with coordinates, labels, and target URLs
  markers: [
    { latLng: [37.0902, -95.7129], name: 'US Office', url: '/us-office' },
    { latLng: [52.1326, 5.2913], name: 'Netherlands Office', url: '/nl-office' },
    { latLng: [1.3521, 103.8198], name: 'Singapore Office', url: '/sg-office' }
  ],
  // Customize marker styling (optional but recommended)
  markerStyle: {
    initial: {
      fill: '#e74c3c',
      stroke: '#ffffff',
      strokeWidth: 2,
      r: 8
    },
    hover: {
      r: 10,
      fill: '#c0392b'
    }
  },
  // Handle marker clicks to trigger page navigation
  onMarkerClick: function(event, index) {
    const targetMarker = this.markers[index];
    if (targetMarker.url) {
      window.location.href = targetMarker.url;
    }
  },
  // Keep the region visibility logic from step 1
  onLoad: function(event, map) {
    map.hideRegions();
    map.showRegions(['US', 'NL', 'SG']);
  }
});

To make sure all three countries are clearly visible without manual zooming, add the focusOn option to auto-adjust the map's view:

focusOn: {
  regions: ['US', 'NL', 'SG'],
  scale: 1.2 // Tweak this to adjust zoom level
}

• Double-check your office coordinates (use tools like Google Maps to get precise lat/long values).
• Make sure you're using a compatible map file (like world_mill.js—most jVectormap distributions include this).
• Adjust the markerStyle values to match your brand's design system.

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