0

我有一个关于添加 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>
);
};

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

4

2 回答 2

0

据我所知，不幸的是，您必须进入从 mapbox 导入的样式并对其进行编辑。我发现这个问题是因为我想看看是否有替代方案，但看起来没有。由于许多原因，为地理编码器设置样式确实令人沮丧。我建议坚持使用 vanilla 样式以避免头痛，但如果您必须更改样式，您应该复制在 中找到的 css /@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css，将其粘贴到另一个 css 文件中，然后在那里进行编辑。我知道我迟到了一年，但玩得开心，祝你好运。

于 2021-10-02T21:35:58.170 回答
0

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

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

于 2020-08-18T04:30:48.287 回答