Mapbox Geocoder 不显示搜索栏

Question

我正在尝试使用 Mapbox 围绕地图构建一个简单的 Web 应用程序。我正在尝试实现 Mapbox Geocoder API，但不知何故我看不到实际的搜索栏。我已经按照 Mapbox 提供的示例进行操作，但我似乎无法弄清楚。希望大家能帮帮我。

这是我的代码

import React, { useEffect, useRef, useState } from 'react';
import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import { Box, Flex,  } from '@chakra-ui/react';

const accessToken = "MyAccessToken";
const mapStyleUrl = "MyMap";

const MapComponent: React.FC = () => {
    const mapContainer = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        mapboxgl.accessToken = accessToken;

        const map = new mapboxgl.Map({
            container: mapContainer.current as HTMLElement, 
            style: mapStyleUrl,
            center: [-79.4512, 43.6568], 
            zoom: 13,
        });

        // Add the geocoder control to the map
        map.addControl(
            new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl,
            })
        );

    }, []);

    return (
        <Flex
            position="relative"
            height="95vh"
            width="95vw"
            marginTop="2.5vh"
            boxShadow="0 4px 12px 0 rgba(0, 0, 0, 0.05)"
            borderRadius="15px"
            flexDirection="column"
            justifyContent="flex-start"
            bg="white"
            ml={6}
            overflow="hidden"
        >
            <Box ref={mapContainer} height="100%" width="100%" />
        </Flex>
    );
};

export default MapComponent;

我正在尝试有一个允许地理编码的搜索栏。

Answer 1

我能够通过将样式表和链接放入index.html 文件来解决该问题。

<link href="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">