Mapbox JS SDK CSS 样式表导致地图消失 [英] Mapbox JS SDK CSS stylesheet causes map to disappear
问题描述
我在 VueJS 应用中使用 Mapbox JavaScript SDK.我可以毫无问题地显示地图.现在我想添加一些标记.我看到在此页面上，您需要在标记之前导入 CSS 样式表将工作.按照文档中的建议，我尝试了以下两种方法:
I'm using the Mapbox JavaScript SDK in a VueJS app. I am able to display a map with no issues. Now I'd like to add some markers. I see on this page that you need to import a CSS stylesheet before markers will work. As suggested in the docs, I've tried both of the following:
import 'mapbox-gl/dist/mapbox-gl.css';从我的 Vue 组件来自我的index.html
import 'mapbox-gl/dist/mapbox-gl.css';from my Vue Component<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css">from the<head>of myindex.html
使用其中任何一个，地图都会消失，控制台中没有可见的警告或错误.没有这些，地图显示正常，但我收到一条警告说:
With either of these, the map disappears, with no visible warnings or errors in the console. Without these, the map shows up fine, but I get a warning saying:
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/.
我哪里出错了?
推荐答案
当导入样式表时，地图 div 被折叠到 0 高度.不知道为什么，但手动设置高度解决了问题.
Turns out the map div got collapsed to 0 height when the stylesheet was imported. No idea why, but manually setting the height resolved the issue.
这篇关于Mapbox JS SDK CSS 样式表导致地图消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
