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

Posted 2023-03-28

【中文标题】当我使用 Hooks 放大地图时，如何让标记出现在地图上

【英文标题】：How can I make Markers appear on a map when I zoom on it with 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 上。现在什么都没有，因为我尝试了一些东西，但没有任何效果。

【参考方案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 中阅读有关使用地图事件的更多信息。