时间戳

首页 > 解决方案 > mapbox 地图未显示在电子应用程序中

electron - 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);

});

任何帮助表示赞赏。

标签： electronmapbox-gl-jsmapbox-glelectron-forge

解决方案

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

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

推荐阅读