React-Leaflet，根据对象数组改变缩放和位置

Question

所以这是我的MapComponent，我添加了逻辑，其中在搜索栏中输入的任何内容都会显示数组中的学校，我想要做的是在单击按钮时添加一些缩放和更改位置效果

<button type="button" onClick={() => updateMapCenterZoom(value.position, 15)}>

但它仍然不适用于 setView 或任何其他提示

 const [query, setQuery] = useState("");
  const [position, setPosition] = useState([14.389786, 121.047566]);
  const [mapZoom, setMapZoom] = useState(13);

  const filteredSchools = schoolData.filter((val) => {
    if (query === "") {
      return val;
    } else {
      return (
        val.name.toLowerCase().includes(query.toLowerCase()) ||
        val.type.toLowerCase().includes(query.toLowerCase())
      );
    }
  });

  const updateMapCenterZoom = (newCenter, newZoom) => {
    setPosition(newCenter);
    setMapZoom(newZoom);
    
  };

这就是它从 MapComponent(React Component) 返回的地方

<MapContainer preferCanvas center={position} zoom={mapZoom} scrollWheelZoom={false}>
            <TileLayer
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
             {filteredSchools.map((value, key) => (
              <Marker
                key={value.id}
                position={value.position}
                eventHandlers={{ click: (e) => handleMarkerClick(e, value) }}>
                  <Popup>{value.name}</Popup>
                </Marker>
                
                ))}
                
          </MapContainer>

除此之外，我还有这个函数，它根据搜索查询创建并自动执行建议 注意：

<MapContainer />

和

<div id='school-container'/>

标签都位于 MapComponent

的 return 语句内

<div id="school-container">
              {filteredSchools.map((value, key) => (
                <div key={key}>
                  <div className="border border-white-500 min-w-[10pc] w-[25pc] max-w-[30pc] text-white p-3 flex flex-row items-center hover:bg-amber-600">
                    <Link to={value.link}>
                      <img src={value.image} alt="logo" className="w-20 l-10 m-2" />
                      <div className="flex flex-col space-y-3 xs:text-xs sm:text-s md:text-m lg:text-l text-start">
                        <div className="color-white">{value.name}</div>
                        <div className="color-white">{value.type}</div>
                      </div>
                    </Link>
                    <button type="button" onClick={() => updateMapCenterZoom(value.position, 15)}>
                      See Location
                    </button>
                  </div>
                </div>
              ))}

这应该有效，我还尝试添加 console.log 以查看它是否收到经纬度和缩放，不知何故它输出它但不改变地图场景

Answer 1

研究了有关

react-leaflet

的类似问题后，我发现移动地图的效果与预期有点不同。

useMap

和

useMapEvents

引用仅适用于

<MapContainer />

组件的子组件。除此之外，如果您需要对地图的引用，则需要使用

whenCreated

上的

MapContainer

属性来存储某个州的地图引用。 参见示例。

考虑到这一点，我们可以通过生成对地图的引用来移动地图，然后调用

setView

或

flyTo

等 Leaflet 命令来移动并缩放到地图中的点。

我创建了一个总结示例，说明这一切是如何实现的。

import { MapContainer } from 'react-leaflet';
import { useState, useCallback } from 'react';

const MapComponent = () => {
  const [map, setMap] = useState(null);

  const updateMapCenterZoom = useCallback((newCenter, newZoom) => {
    if (map !== null) {
      map.setView(newCenter, newZoom);
    }
  }, [map]);

  return (
    <>
      <MapContainer
        preferCanvas
        center={[14.389786, 121.047566]}
        zoom={13}
        scrollWheelZoom={false}
        whenCreated={setMap}
      />

      <button type="button" onClick={() => updateMapCenterZoom([14.389786, 121.047566], 15)}>
        See Location
      </button>
    </>
  );
};

export default MapComponent