在移动到目标位置之前在同一位置渲染地图 mapbox react hooks

Question

我的地图在移动到用户选择的目的地之前加载到同一位置。我试了所有方法，我觉得 onChange 有问题，但我找不到答案。

我想要实现的是通过按钮触发输入，在地图框 api 和 return 坐标中搜索位置，并将该位置移动到 target.value

export default function Map() {
  
    const mapContainer = useRef(null);
    const [lng, setLng] = useState(1.43278);
    const [lat, setLat] = useState(38.90889);
    const [zoom, setZoom] = useState(9);
  
    const [searchValue, setSearchValue] = useState("");
  
    useEffect(() => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
       style: "mapbox://styles/mapbox/streets-v11",
        center: [lng, lat],
        zoom: zoom,
      });
      map.addControl(new mapboxgl.NavigationControl(), "top-right");
      map.on("move", () => {
        setLng(map.getCenter().lng.toFixed(4));
        setLat(map.getCenter().lat.toFixed(4));
        setZoom(map.getZoom().toFixed(2));
      });
    }, []); // eslint-disable-line react-hooks/exhaustive-deps
  
    const handleChange = (event) => {
      event.preventDefault();
      setSearchValue(event.target.value);
    };
    
    const changeMapCenter = () => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/streets-v11",
        center: [lng, lat],
        zoom: zoom,
      });
  
      return fetch(
        `${MAPBOX_PLACES_API}${searchValue}${REST_PLACES_URL}`,
        FETCH_HEADERS
      )
        .then((res) => res.json())
        .then((apiData) => {
          console.log("apidata=>", apiData);
  
          const coordinates = apiData.features[0].center;
  
          console.log("coordinates=>", coordinates);
  
          setLng(coordinates[0]);
          setLat(coordinates[1]);
          new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);
        });
    };
  
    return (
      <div className="mapBox">
        <div className="sidebar">
          Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
          <div>
            <label>create your spot collection</label>
            <input
              type="text"
              id="spotLocation"
              onChange={handleChange}
              value={searchValue}
            />
            <button onClick={()=>changeMapCenter()}>search and create </button>
          </div>
        </div>
  
        <div className="map-container" ref={mapContainer} />
      </div>
    );
  }

Answer 1

您需要先获取坐标，然后创建地图

const changeMapCenter = async () => {

      const results = await fetch(`${MAPBOX_PLACES_API}${searchValue}${REST_PLACES_URL}`,FETCH_HEADERS).then(res => res.json())

     const coordinates = results.features[0].center
      setLng(coordinates[0]);
      setLat(coordinates[1]);

      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/streets-v11",
        center: [coordinates[0], coordinates[1]], //do not use state lat and lng here and expect it to change, it doesn't.
        zoom: zoom,
      });
  //do not use the state lat and lng here because it's not ready yet since it's async. You need to use coordinates[0]and [1]
    };

反转坐标[0]和坐标[1]，如果我弄错了。

在移动到目标位置之前在同一位置渲染地图 mapbox react hooks

map render in the same location before moving to the target location mapbox react hooks

javascript

node.js

mapbox

mapbox-gl

react-hooks