普通网友 2024-03-05 21:20 采纳率: 30%
浏览 4
已结题

百度地图API在javaFX窗口中的调用

由于毕业设计需要所以打算做一个在java窗口中显示地图的功能。主要设计思路是从桌面端调取百度地图API来在java窗口内显示地图,并能够添加一定的覆盖。
但不知道为什么原因,调用百度地图API的html在浏览器中可以正常加载出地图,但是在javafx窗口中显示全白,无法加载出地图,同时相关的html组件可以正常加载和交互,但是就是地图容器空白,现请求各位能否提供一些帮助。
经过三天的摸索目前的成果如下。
代码部分:

  1. WindowsManager:

package gis.code.gispro;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WindowsManager extends Application {
    public static void main(String[] args) {
        launch();
    }

    public void start(Stage stage){
        WebView webView = new WebView();
        WebEngine engine = webView.getEngine();

        String url = getClass().getResource("test.html").toExternalForm();
        engine.load(url);

        StackPane root = new StackPane();
        root.getChildren().add(webView);
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }
}

2 test.html:


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=我的AK"></script> //实际使用时已经替换为相应的AK
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
    var map = new BMapGL.Map('container'); // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>

预览图如下:
浏览器端:

img

java窗口:

img

  • 写回答

8条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-03-05 21:21
    关注

    引自免费微信小程序:皆我百晓生

    在JavaFX中嵌入Web内容并调用百度地图API时遇到加载空白的问题,可能是因为WebView组件默认的安全设置或资源配置限制了外部JavaScript资源的加载。为了解决这个问题,请尝试以下解决方案:

    1. 允许WebView加载JavaScript和外部资源: 在初始化WebView之前,需要确保它允许执行JavaScript代码,并且能够加载外部资源。
    webView.getEngine().setJavaScriptEnabled(true);
    
    1. 确保HTML文件与JavaFX应用位于同一目录下或正确配置路径,以便WebView能正确加载HTML文件中的资源。

    2. 百度地图WebGL API需要全屏显示,而在JavaFX WebView中,可能需要设置WebView的大小以适应窗口大小,或者监听窗口大小变化动态调整WebView大小。

    stage.widthProperty().addListener((observable, oldValue, newValue) -> {
        webView.setPrefWidth(newValue.doubleValue());
    });
    stage.heightProperty().addListener((observable, oldValue, newValue) -> {
        webView.setPrefHeight(newValue.doubleValue());
    });
    
    1. 由于安全策略问题,某些情况下WebView可能无法加载非HTTPS的外部资源。检查<script>标签引用的百度地图API URL是否可以正常访问,如果可能的话,尝试使用HTTPS协议加载API:
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的AK"></script>
    
    1. 检查JavaFX的日志输出,查看是否有任何关于WebView加载资源失败的相关错误信息。

    2. 尝试在WebView加载完成事件后初始化地图实例,确保DOM元素已经完全加载:

    engine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
        if (newState == Worker.State.SUCCEEDED) {
            JSObject window = (JSObject) engine.executeScript("window");
            window.call("initMap", "");
        }
    });
    
    // 在test.html中添加initMap函数
    <script>
    function initMap() {
        var map = new BMapGL.Map('container');
        // ...
    }
    </script>
    

    通过以上步骤排查,通常可以解决在JavaFX中嵌入百度地图API出现的地图加载空白的问题。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(7条)

报告相同问题?

问题事件

  • 系统已结题 3月13日
  • 已采纳回答 3月5日
  • 创建了问题 3月5日

悬赏问题

  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式(有相互嵌套)
  • ¥30 关于#算法#的问题:运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁,怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题:做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化