Mapbox 地理编码器上的 CSS

Question

我有一个关于添加 CSS 的问题，因为我找不到与此相关的任何其他问题。我试图将地理编码器搜索移到地图上比它位于“右上角”的位置更远的位置，但无论我使用内联 CSS 还是内部 CSS，我都无法更改它的位置：

import React from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css";
import Geocoder from "react-map-gl-geocoder";
const geostyle {
    margin: '20px';
}

const Map = () = > {`
...
return(
<div>
...
<Geocoder
    style={geostyle}
    mapRef={myMap}
    onViewportChange={setViewport}
    mapboxApiAccessToken={MAPBOX_TOKEN}
    viewport={viewport}
    position="top-left"
  />
...
</div>
);
};

有没有办法自定义地理编码器搜索栏？我是否必须编辑从“react-map-gl-geocoder”导入的mapbox css？谢谢！

Answer 1

据我所知，不幸的是您必须进入从 Mapbox 导入的样式并编辑它们。我发现这个问题是因为我想看看是否有替代方案，但看起来没有。由于多种原因，设置地理编码器的样式确实令人沮丧。我建议坚持使用普通样式以避免头痛，但如果您必须更改样式，则应该复制

/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css

中找到的 css，将其粘贴到另一个 css 文件中，然后在其中进行编辑。我知道我迟到了一年，但祝你玩得开心，祝你好运。

Answer 2

我正在使用 Mapbox GL JS，并且通过自定义 Mapbox CSS 来自定义 Mapbox 地理编码器元素。

正如您在此 Mapbox 示例中所看到的“将地理编码器输入置于地图之外”，通过编辑 Mapbox CSS 来更改地理编码器的位置。

Answer 3

这是我的工作样本：

https://transparentgov.net:3200/mapbox10/default?layer_id=105&layer=Fire+Divisions¢er_lat=34.049039¢er_long=-118.246521¢er_zoom=17&url=https%3A%2F%2Fmaps.lacity.org%2Farcgis%2Frest%2Fservices %2FMapping%2FNavigateLA%2FMapServer&panto=0

CSS 是：

html（我使用.pug，它与html相同，只是格式不同）

javascript在这里：