我正在尝试使用 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;
我正在尝试有一个允许地理编码的搜索栏。
我能够通过将样式表和链接放入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">