GMapsFX运行正常但地图不显示（NetBeans环境）

在NetBeans环境中集成GMapsFX API到Java项目，程序运行无报错，但地图组件处于“隐藏”状态无法正常显示。以下是相关代码及问题分析：

FXML代码 #

<?xml version="1.0" encoding="UTF-8"?>

<?import com.lynden.gmapsfx.GoogleMapView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="443.0" prefWidth="711.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.lynden.gmaps.directions.GmapController">
   <children>
      <GoogleMapView fx:id="mapView" layoutX="-311.0" layoutY="-244.0" prefWidth="490.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
      <TextField fx:id="fromTextField" prefHeight="27.0" prefWidth="222.0" promptText="From:" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="10.0" />
      <TextField fx:id="toTextField" layoutX="10.0" layoutY="10.0" onAction="#toTextFieldAction" prefHeight="27.0" prefWidth="222.0" promptText="To:" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="50.0" />
   </children>
</AnchorPane>

控制器代码 #

package tn.esprit.carngo.presentation;

import com.lynden.gmapsfx.GoogleMapView;
import com.lynden.gmapsfx.MapComponentInitializedListener;
import com.lynden.gmapsfx.javascript.object.*;
import com.lynden.gmapsfx.service.directions.*;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextField;

public class GmapController implements Initializable, MapComponentInitializedListener, DirectionsServiceCallback {

    protected DirectionsService directionsService;
    protected DirectionsPane directionsPane;

    protected StringProperty from = new SimpleStringProperty();
    protected StringProperty to = new SimpleStringProperty();

    @FXML
    protected GoogleMapView mapView;

    @FXML
    protected TextField fromTextField;

    @FXML
    protected TextField toTextField;

    @FXML
    private void toTextFieldAction(ActionEvent event) {
        DirectionsRequest request = new DirectionsRequest(from.get(), to.get(), TravelModes.DRIVING);
        directionsService.getRoute(request, this, new DirectionsRenderer(true, mapView.getMap(), directionsPane));
    }

    @Override
    public void directionsReceived(DirectionsResult results, DirectionStatus status) {
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        mapView.addMapInializedListener(this);
        to.bindBidirectional(toTextField.textProperty());
        from.bindBidirectional(fromTextField.textProperty());
    }

    @Override
    public void mapInitialized() {
        MapOptions options = new MapOptions();

        options.center(new LatLong(47.606189, -122.335842))
                .zoomControl(true)
                .zoom(12)
                .overviewMapControl(false)
                .mapType(MapTypeIdEnum.ROADMAP);
        GoogleMap map = mapView.createMap(options);
        directionsService = new DirectionsService();
        directionsPane = mapView.getDirec();
    }

}

截图说明 #

• 输出截图：程序运行日志无报错信息
• 显示窗口截图：界面仅展示两个输入文本框，地图区域空白未显示

问题排查与解决步骤 #

1. 修复FXML布局错误 #

FXML中GoogleMapView的layoutX="-311.0"和layoutY="-244.0"会将地图组件偏移到AnchorPane可视区域之外，即使设置了四边锚点也会导致布局冲突。删除这两个属性，修改后的代码片段：

<GoogleMapView fx:id="mapView" prefWidth="490.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />

2. 修正控制器方法拼写错误 #

控制器中directionsPane = mapView.getDirec();存在拼写错误，正确的方法名为getDirectionsPane()，修改后：

directionsPane = mapView.getDirectionsPane();

3. 验证依赖与版本兼容性 #

确保项目引入的GMapsFX版本与JavaFX 8兼容，推荐使用GMapsFX 2.1.0版本（适配JavaFX 8），Maven依赖示例：

<dependency>
    <groupId>com.lynden</groupId>
    <artifactId>gmapsfx</artifactId>
    <version>2.1.0</version>
</dependency>

4. 检查启动类配置 #

确认项目启动类正确加载FXML并显示舞台，示例代码：

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MainApp extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("/path/to/your/fxml/file.fxml"));
        Scene scene = new Scene(root);
        stage.setTitle("GMapsFX Demo");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

5. 配置Google Maps API密钥（可选） #

部分GMapsFX版本需要配置Google Maps API密钥，可通过以下方式在mapInitialized方法中设置：

@Override
public void mapInitialized() {
    // 替换为你的Google Maps API密钥
    mapView.setApiKey("YOUR_GOOGLE_MAPS_API_KEY");
    
    MapOptions options = new MapOptions();
    // ... 其他地图配置
}

完成以上步骤后重新运行程序，地图组件应该能正常显示。

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