如何在IntelliJ的Swing JPanel中嵌入Google/Mapbox交互式地图

方案一：JavaFX WebView 整合到 Swing（支持Google/Mapbox） #

JavaFX的WebView对现代JS和HTML支持完善，能正常加载Google Maps嵌入或Mapbox地图，且可通过JFXPanel无缝整合进Swing界面，JDK8及以上版本自带该组件，无需额外付费库。

修正后的实现代码 #

import javax.swing.*;
import javafx.application.Platform;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import java.awt.*;

public class SwingMapViewer extends JFrame {

    public SwingMapViewer() {
        super("交互式地图（Swing+JavaFX）");
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(800, 600);
        setLocationRelativeTo(null);

        // 初始化JavaFX环境
        JFXPanel fxPanel = new JFXPanel();
        add(fxPanel, BorderLayout.CENTER);

        Platform.runLater(() -> {
            WebView webView = new WebView();
            WebEngine webEngine = webView.getEngine();

            // 加载Google Maps嵌入代码（替换成你的API密钥）
            String googleMapsEmbed = "<html><body style='margin:0; padding:0;'>" +
                    "<iframe width='100%' height='100%' style='border:0' " +
                    "src='https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Eiffel%20Tower' " +
                    "allowfullscreen></iframe>" +
                    "</body></html>";

            // 或加载Mapbox地图（替换成你的Mapbox Access Token）
            // String mapboxEmbed = "<html><body style='margin:0; padding:0;'>" +
            //         "<iframe width='100%' height='100%' style='border:0' " +
            //         "src='https://api.mapbox.com/styles/v1/mapbox/streets-v12.html?access_token=YOUR_MAPBOX_TOKEN'" +
            //         "allowfullscreen></iframe>" +
            //         "</body></html>";

            webEngine.loadContent(googleMapsEmbed);
            fxPanel.setScene(new Scene(webView));
        });
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new SwingMapViewer().setVisible(true));
    }
}

注意事项 #

• 确保你的JDK包含JavaFX模块（JDK8默认包含，JDK11及以上需手动添加JavaFX SDK，IntelliJ中可通过项目结构设置添加）
• 替换代码中的YOUR_API_KEY/YOUR_MAPBOX_TOKEN为你申请的有效密钥
• 若使用JDK11+，需在运行配置中添加VM参数：--module-path "path/to/javafx-sdk/lib" --add-modules javafx.controls,javafx.web

方案二：纯Swing开源地图库（JXMapViewer2） #

如果不想依赖JavaFX，可使用基于OpenStreetMap的JXMapViewer2，这是纯Swing组件，无需浏览器或外部API密钥，适合轻量地图需求。

实现步骤 #

1. 在IntelliJ中添加Maven依赖（或手动下载JAR）：

<dependency>
    <groupId>org.openstreetmap.jmapviewer</groupId>
    <artifactId>jxmapviewer2</artifactId>
    <version>2.11</version>
</dependency>

2. 基础地图显示代码：

import org.openstreetmap.gui.jmapviewer.JMapViewer;
import org.openstreetmap.gui.jmapviewer.MapMarkerDot;
import org.openstreetmap.gui.jmapviewer.tilesources.OsmTileSource;
import javax.swing.*;
import java.awt.*;

public class SwingOsmMap extends JFrame {

    public SwingOsmMap() {
        super("OpenStreetMap in Swing");
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(800, 600);
        setLocationRelativeTo(null);

        JMapViewer mapViewer = new JMapViewer();
        mapViewer.setTileSource(new OsmTileSource.Mapnik()); // 设置地图源
        mapViewer.setDisplayPositionByLatLon(48.8584, 2.2945, 12); // 定位埃菲尔铁塔，缩放级别12

        // 添加标记点
        MapMarkerDot marker = new MapMarkerDot("埃菲尔铁塔", 48.8584, 2.2945);
        marker.setColor(Color.RED);
        mapViewer.addMapMarker(marker);

        add(mapViewer, BorderLayout.CENTER);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new SwingOsmMap().setVisible(true));
    }
}

特点 #

• 纯Swing实现，无需额外浏览器组件
• 支持缩放、拖拽、标记点等基础交互
• 基于OpenStreetMap，免费无需API密钥

为什么之前的JEditorPane方案失效？ #

JEditorPane仅支持非常基础的HTML 3.2和有限的JS，对现代iframe嵌入的JS特性（如lazy loading、现代CSS）完全不兼容，因此无法正常加载Google Maps嵌入代码，建议直接替换为上述两种方案。

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