如何使用MUI自定义Mapbox Geocoder组件

我在开发基于Mapbox的React应用，参考了visgl的Geocoder示例，但对现有实现逻辑感到困惑。我想把Geocoder的输入字段改成类似MUI官方Google Maps Place自动完成组件的样式，但当前的GeocoderControl组件是通过useControl创建原生Mapbox控件，并非返回JSX元素，没法直接修改输入框样式。我希望能把Geocoder实现成类似<Input />的React组件形式，通过Mapbox API完成自动完成功能。

当前的GeocoderControl代码如下：

import * as React from 'react';
import {useState} from 'react';
import {useControl, Marker, MarkerProps, ControlPosition} from 'react-map-gl';
import MapboxGeocoder, {GeocoderOptions} from '@mapbox/mapbox-gl-geocoder';

type GeocoderControlProps = Omit<GeocoderOptions, 'accessToken' | 'mapboxgl' | 'marker'> & {
  mapboxAccessToken: string;
  marker?: boolean | Omit<MarkerProps, 'longitude' | 'latitude'>;

  position: ControlPosition;

  onLoading?: (e: object) => void;
  onResults?: (e: object) => void;
  onResult?: (e: object) => void;
  onError?: (e: object) => void;
};

/* eslint-disable complexity,max-statements */
export default function GeocoderControl(props: GeocoderControlProps) {
  const [marker, setMarker] = useState(null);

  const geocoder = useControl<MapboxGeocoder>(
    () => {
      const ctrl = new MapboxGeocoder({
        ...props,
        marker: false,
        accessToken: props.mapboxAccessToken
      });
      ctrl.on('loading', props.onLoading);
      ctrl.on('results', props.onResults);
      ctrl.on('result', evt => {
        props.onResult(evt);

        const {result} = evt;
        const location =
          result &&
          (result.center || (result.geometry?.type === 'Point' && result.geometry.coordinates));
        if (location && props.marker) {
          setMarker(<Marker {...props.marker} longitude={location[0]} latitude={location[1]} />);
        } else {
          setMarker(null);
        }
      });
      ctrl.on('error', props.onError);
      return ctrl;
    },
    {
      position: props.position
    }
  );

  // @ts-ignore (TS2339) private member
  if (geocoder._map) {
    if (geocoder.getProximity() !== props.proximity && props.proximity !== undefined) {
      geocoder.setProximity(props.proximity);
    }
    if (geocoder.getRenderFunction() !== props.render && props.render !== undefined) {
      geocoder.setRenderFunction(props.render);
    }
    if (geocoder.getLanguage() !== props.language && props.language !== undefined) {
      geocoder.setLanguage(props.language);
    }
    if (geocoder.getZoom() !== props.zoom && props.zoom !== undefined) {
      geocoder.setZoom(props.zoom);
    }
    if (geocoder.getFlyTo() !== props.flyTo && props.flyTo !== undefined) {
      geocoder.setFlyTo(props.flyTo);
    }
    if (geocoder.getPlaceholder() !== props.placeholder && props.placeholder !== undefined) {
      geocoder.setPlaceholder(props.placeholder);
    }
    if (geocoder.getCountries() !== props.countries && props.countries !== undefined) {
      geocoder.setCountries(props.countries);
    }
    if (geocoder.getTypes() !== props.types && props.types !== undefined) {
      geocoder.setTypes(props.types);
    }
    if (geocoder.getMinLength() !== props.minLength && props.minLength !== undefined) {
      geocoder.setMinLength(props.minLength);
    }
    if (geocoder.getLimit() !== props.limit && props.limit !== undefined) {
      geocoder.setLimit(props.limit);
    }
    if (geocoder.getFilter() !== props.filter && props.filter !== undefined) {
      geocoder.setFilter(props.filter);
    }
    if (geocoder.getOrigin() !== props.origin && props.origin !== undefined) {
      geocoder.setOrigin(props.origin);
    }
    // Types missing from @types/mapbox__mapbox-gl-geocoder
    // if (geocoder.getAutocomplete() !== props.autocomplete && props.autocomplete !== undefined) {
    //   geocoder.setAutocomplete(props.autocomplete);
    // }
    // if (geocoder.getFuzzyMatch() !== props.fuzzyMatch && props.fuzzyMatch !== undefined) {
    //   geocoder.setFuzzyMatch(props.fuzzyMatch);
    // }
    // if (geocoder.getRouting() !== props.routing && props.routing !== undefined) {
    //   geocoder.setRouting(props.routing);
    // }
    // if (geocoder.getWorldview() !== props.worldview && props.worldview !== undefined) {
    //   geocoder.setWorldview(props.worldview);
    // }
  }
  return marker;
}

const noop = () => {};

GeocoderControl.defaultProps = {
  marker: true,
  onLoading: noop,
  onResults: noop,
  onResult: noop,
  onError: noop
};

提供两种方案，根据你的需求选择：

方案一：自定义现有Mapbox Geocoder控件样式 #

Mapbox Geocoder会生成固定DOM结构，通过CSS覆盖默认样式即可匹配MUI风格：

1. 核心DOM类名：

   • 输入框容器：.mapboxgl-ctrl-geocoder
   • 输入框本身：.mapboxgl-ctrl-geocoder input
   • 下拉结果列表：.mapboxgl-ctrl-geocoder--suggestions

2. 示例样式（匹配MUI OutlinedInput）：

/* 重置默认控件样式 */
.mapboxgl-ctrl-geocoder {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.23);
}

/* 输入框样式 */
.mapboxgl-ctrl-geocoder input {
  padding: 10px 16px;
  font-size: 1rem;
  font-family: inherit;
  border: none;
  outline: none;
}

/* 聚焦状态 */
.mapboxgl-ctrl-geocoder:focus-within {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

/* 下拉列表容器 */
.mapboxgl-ctrl-geocoder--suggestions {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid rgba(0, 0, 0, 0.23);
  margin-top: 4px;
}

/* 下拉选项样式 */
.mapboxgl-ctrl-geocoder--suggestion {
  padding: 10px 16px;
  cursor: pointer;
}

.mapboxgl-ctrl-geocoder--suggestion:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

这种方案无需修改组件逻辑，适合快速适配，但灵活性有限，无法复用MUI表单组件特性。

方案二：基于MUI Autocomplete + Mapbox API完全重写 #

完全用React组件实现，直接复用MUI样式和功能，符合你想要的<Input />形式：

步骤1：安装依赖 #

npm install @mui/material @emotion/react @emotion/styled @mapbox/mapbox-sdk

步骤2：创建自定义Geocoder组件 #

import React, { useState } from 'react';
import { Autocomplete, TextField, Box } from '@mui/material';
import { GeocodingClient } from '@mapbox/mapbox-sdk/services/geocoding';
import mapbox from '@mapbox/mapbox-sdk';

// 初始化Mapbox Geocoding客户端
const geocodingClient = GeocodingClient({ accessToken: '你的Mapbox Access Token' });

const MapboxGeocoderMUI = ({ onSelect, placeholder = '搜索地点' }) => {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);

  // 调用Mapbox API获取地点建议
  const fetchSuggestions = async (inputValue) => {
    if (!inputValue.trim()) {
      setOptions([]);
      return;
    }
    setLoading(true);
    try {
      const response = await geocodingClient
        .forwardGeocode({
          query: inputValue,
          limit: 5,
          autocomplete: true,
          // 可添加countries、proximity等参数缩小搜索范围
        })
        .send();
      // 格式化结果为Autocomplete需要的结构
      const suggestions = response.body.features.map(feature => ({
        label: feature.place_name,
        value: feature,
        coordinates: feature.center,
      }));
      setOptions(suggestions);
    } catch (error) {
      console.error('Geocoding请求失败:', error);
      setOptions([]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Box width="100%" maxWidth={400}>
      <Autocomplete
        freeSolo
        loading={loading}
        options={options}
        onInputChange={(event, newInputValue) => {
          fetchSuggestions(newInputValue);
        }}
        onChange={(event, newValue) => {
          newValue && onSelect(newValue);
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label={placeholder}
            variant="outlined"
            fullWidth
          />
        )}
      />
    </Box>
  );
};

export default MapboxGeocoderMUI;

步骤3：在地图组件中使用 #

import React, { useState } from 'react';
import Map from 'react-map-gl';
import MapboxGeocoderMUI from './MapboxGeocoderMUI';

const MapContainer = () => {
  const [viewport, setViewport] = useState({
    latitude: 39.9042,
    longitude: 116.4074,
    zoom: 10,
  });

  const handlePlaceSelect = (place) => {
    // 选中地点后更新地图视图
    setViewport({
      ...viewport,
      latitude: place.coordinates[1],
      longitude: place.coordinates[0],
      zoom: 14,
    });
    // 可在此添加标记点逻辑（使用react-map-gl的Marker组件）
  };

  return (
    <div style={{ position: 'relative', height: '100vh' }}>
      <Map
        {...viewport}
        width="100%"
        height="100%"
        mapboxAccessToken="你的Mapbox Access Token"
        onViewportChange={setViewport}
      />
      {/* 将自定义Geocoder放在地图右上角 */}
      <div style={{ position: 'absolute', top: 20, right: 20, zIndex: 10 }}>
        <MapboxGeocoderMUI onSelect={handlePlaceSelect} />
      </div>
    </div>
  );
};

export default MapContainer;

方案优势 #

• 完全基于React组件，样式可通过MUI主题或自定义样式完全控制
• 支持MUI表单组件特性（如验证、错误提示）
• 逻辑清晰，由React状态管理，无需处理原生控件生命周期

内容的提问来源于stack exchange，提问作者user16971617