WebView 显示带有 GraphHopper 路由的 Leaflet 地图答案

【问题标题】：WebView show Leaflet map with GraphHopper routingWebView 显示带有 GraphHopper 路由的 Leaflet 地图
【发布时间】：2016-07-18 09:27:37
【问题描述】：

我正在使用 Leaflet API 在 JavaFX 应用程序中显示地图。我正在使用 WebView 在我的应用程序中使用地图来可视化网站。该应用程序显示了一些点之间的汽车驾驶模拟。如果我使用 OSMR 路由，我在可视化网站和地图时没有任何问题。

问题是我必须使用GraphHopper路由机。

如果我使用 GraphHopper 路由，将显示地图的控制元素，但地图只有灰色。

如果我在浏览器中打开网站，我没有任何问题。

这是地图的代码

<body>
<div id="map" class="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="rm/dist/leaflet-routing-machine.js"></script>
<script src="rm/lrm-graphhopper.js"></script>
<script type="text/javascript">
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.Routing.control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    router: L.Routing.graphHopper('Api-key'),
    routeWhileDragging: true
}).addTo(map);
</script>
</body>

这是 javaFX 应用程序的代码：

WebEngine webEngine = webView.getEngine();
webEngine.setJavaScriptEnabled(true);
webEngine.load(Main.class.getResource("/application/index.html").toExternalForm() );

谁能帮帮我？

【问题讨论】：

您使用的是有效的 api 密钥吗？控制台中打印了什么？是否提出请求？它们都还好，只是没有可视化吗？
是的，我使用的是有效的 api 密钥。问题是路由的请求。这是https而不是http。我认为 webview 的证书有一些问题。
重新证书：您使用的是最新的 Java 版本吗？
是的，我使用的是 1.8.0_102 版本。
我使用的是 lrm-graphhopper 库，而不是直接使用 graphhopper java api。

标签： javafx webview leaflet openstreetmap graphhopper

【解决方案1】：

一个问题是，在您设置视图之前，您的地图还没有完全初始化。试试，例如：

var map = L.map('map').setView([57.74, 11.94], 10);

甚至只是：

var map = L.map('map').setView([0, 0], 0);

您应该会看到您的地图图块，并希望看到您的路线。

【讨论】：