时间戳

首页 > 解决方案 > Mapbox JS SDK CSS 样式表导致地图消失

javascript - Mapbox JS SDK CSS 样式表导致地图消失

问题描述

我在 VueJS 应用程序中使用 Mapbox JavaScript SDK。我能够毫无问题地显示地图。现在我想添加一些标记。我在此页面上看到您需要先导入 CSS 样式表，然后标记才能起作用。正如文档中所建议的，我尝试了以下两种方法：

  1. import 'mapbox-gl/dist/mapbox-gl.css';来自我的 Vue 组件
  2. <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css">从<head>我的index.html

使用其中任何一种，地图都会消失，控制台中没有可见的警告或错误。没有这些，地图显示正常，但我收到警告说：

This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.

我哪里错了？

标签： javascripthtmlcssvue.jsmapbox-gl-js

解决方案

原来，当样式表被导入时，地图 div 被折叠到 0 高度。不知道为什么，但手动设置高度解决了这个问题。

推荐阅读