zoukankan      html  css  js  c++  java
  • react-leaflet 实战:Marker Popup 改成触摸触发

    如果你在 Marker 里面加一个 Popup 。

    这个东西会自动加一个点击出现的事件。

    而我想改成鼠标放上去出现,离开时消失。

    上代码。(请粘贴到 https://react-leaflet.js.org/ 的编辑器中查看)

    const position = [51.505, -0.09]
    function DraggableMarker() { 
    
      const markerRef = useRef(null)
      const popRef= useRef(null)
      const eventHandlers = useMemo(
        () => ({
          mouseover() {
            const marker = markerRef.current        
            marker.openPopup()      
          },
          mouseout() {
            const marker = markerRef.current
            marker.closePopup()
          }
        }),
        [],
      )
    
      return (
        <Marker ref={markerRef} eventHandlers={eventHandlers} position={position}>
          <Popup ref={popRef} >
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      )
    }
            
    render(
      <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <DraggableMarker />
      </MapContainer>
    )

    以上。

     
  • 相关阅读:
    2019ICPC上海站
    “浪潮杯”第九届山东省ACM大学生程序设计竞赛重现赛(2018)
    集合问题
    后缀数组
    141. 周期(KMP)
    求和(矩阵快速幂)
    大数(KMP)
    1270: [蓝桥杯2015决赛]完美正方形
    AC自动机
    8.26作业
  • 原文地址:https://www.cnblogs.com/foxcharon/p/14111657.html
Copyright © 2011-2022 走看看