电子应用程序中未显示 mapbox 地图

Question

我正在学习 Electron 开发，想将 mapbox 集成到一个虚拟应用程序中。我使用 electron-forge 来初始化应用程序。在我添加 mapbox 之前它工作正常。使用 mapbox，地图不会显示在应用程序的主要区域中。

这是我的非常简单的代码：

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
        <link href='styles.css' rel='stylesheet' />
    <title></title>
  </head>
  <body>
    <div id='container'></div>

    <script>
        require('./renderer.js')
    </script>
  </body>
</html>

render.js:

var mapboxgl = require("mapbox-gl/dist/mapbox-gl.js");

mapboxgl.accessToken =
  "pk.<SOME_MAGIC_STRING_HERE>";

var map = new mapboxgl.Map({
  container: "container",
  style: "mapbox://styles/mapbox/streets-v11"
});

map.on("load", function() {
  console.log("should show the map", map);

});

感谢任何帮助。

Answer 1

如评论中所述：需要通过 CSS 为地图容器指定明确的高度和宽度，以便显示地图。

#container {
  width: 400px;
  height: 400px;
}

电子应用程序中未显示 mapbox 地图

mapbox map does not show up in electron app

electron

mapbox-gl-js

mapbox-gl

electron-forge