我正在学习电子开发，并希望将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);
});
任何帮助表示赞赏。
正如评论中所提到的：地图容器需要通过CSS给出明确的高度和宽度，以便显示地图。
#container {
width: 400px;
height: 400px;
}