当我使用 Hooks 放大地图时，如何让标记出现在地图上答案

【问题标题】：How can I make Markers appear on a map when I zoom on it with Hooks当我使用 Hooks 放大地图时，如何让标记出现在地图上
【发布时间】：2021-04-15 01:35:11
【问题描述】：

我对前端开发比较陌生，在寻找合适的文档来帮助我使用此功能时遇到了问题。我一直在尝试使用 react-leaflet 和 React Hooks 在缩放到某个级别时显示一些标记。

这是我的地图代码：

import React, { useEffect } from 'react'; 
import { MapContainer, TileLayer, LayerGroup, Marker } from 'react-leaflet';
import TanitMarker from './marker';
import ZoomControlledLayer from './zoom-controlled-layer';
import CustomPopup from './popup';
import './my-map.scss';

function MyMap() {

  const hotel = {
    thumbnail: {
      src: "./hotel.jpg"
    },
    name: "",
    title: "****",
  }

  useEffect(() => {
    console.log('Map is mounted!');
  }, []); 


  return (
    <div className="map-container">
      <MapContainer center={[35.741728, 10.626254]} zoom={8} scrollWheelZoom={true}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <ZoomControlledLayer zoomRef={7}>
          <LayerGroup>
            <Marker position={[36.4242, 10.6749]}
              riseOnHover={true}>
              <CustomPopup site={hotel}></CustomPopup>
            </Marker>
          </LayerGroup>
        </ZoomControlledLayer>
      </MapContainer>
    </div>
  )
}

export default MyMap;

我正在尝试使 ZoomControlledLayer 下的 LayerGroup 在达到缩放级别 7 时出现。

提前谢谢你。

【问题讨论】：

欢迎来到 SO！您的自定义文件 ZoomControlledLayer 中有什么？缺少一些细节时很难提供帮助。
抱歉没有解释，实际上 ZoomControlledLayer 充当了一个包装器，我想让它的内容出现在 Zoom 上。现在什么都没有，因为我尝试了一些东西，但没有任何效果。

标签： reactjs leaflet react-hooks react-leaflet

【解决方案1】：

TileLayers 和 GridLayers 有一个 maxZoom 和 minZoom 属性，但它看起来不像 LayerGroup 有一个，所以你必须手动实现它。首先，让我们在状态变量中跟踪地图的缩放级别：

import { MapContainer, useMapEvents } from 'react-leaflet';

function ZoomTracker = ({ setZoom }) => {
  const map = useMapEvents({
    zoom(){
      setZoom(map.getZoom())
    }
  })
  return null
}

function MyMap(){

  const [zoom, setZoom] = useState()

  return (

    <MapContainer>
      <ZoomTracker setZoom={setZoom} />
      <ZoomControlledLayer zoom={zoom} minZoom={7}>
        {...all_the_stuff_in_here}
      </ZoomControlledLayer>
    </MapContainer>

  )

}

所以现在MyMap 正在跟踪状态中的当前缩放级别，并将其传递给ZoomControlledLayer 组件。现在在你的ZoomControlledLayer:

const ZoomControlledLayer = ({ zoom, minZoom, children }) => {

  if (zoom >= minZoom){
    return (
      <>
        {children}
      </>
    );
  } else {
    return null;
  }

}

所以ZoomControlledLayer 仅在地图缩放与您的minZoom 相同或更大时才会渲染任何内容。我没有对此进行测试，但希望它足以让你继续前进。您可以在 react-leaflet v3 here 中阅读有关使用地图事件的更多信息。

【讨论】：