在 react-leaflet 中悬停图层时显示弹出窗口

如何解决在 react-leaflet 中悬停图层时显示弹出窗口

我试图在反应传单中悬停图层时显示弹出窗口。我使用 GeoJson 渲染地图上的所有图层，并使用 onEachFeature() 在悬停图层时显示弹出窗口。但是，当我将鼠标移入图层时，没有显示弹出窗口。它只在点击时显示。这是我的代码和我的地图（图层为蓝色）。

import { MapContainer,TileLayer,Marker,Popup,GeoJSON } from 'react-leaflet';
import './index.css'
import React,{ useEffect,useState } from 'react';
import "leaflet/dist/leaflet.css";
import Header from '../common/header'
import { PixiOverlay } from 'react-leaflet-pixi-overlay';
import * as polygonData from '../../data/tinh.json';
import axios from 'axios'
import * as Request from '../../services';

export default function Home() {
  // const [display,setDisplay]=useState(false);
  // const [options,setOptions]=useState([]);
  // const [search,setSearch]= useState("");

  //function to show popup when hover
  const onEachContry = (feature,layer) =>{
    const contryName = feature.properties.NAME_1;   
    layer.on('mouseover',function (e) {
      layer.bindPopup(contryName)
    });
  }

  return (
    <>
      <Header />
      <MapContainer center={[10.7743,106.6669]} zoom={5}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <GeoJSON
          data={polygonData.features}
          onEachFeature={onEachContry}
       />
      </MapContainer>
</>

解决方法

您只需调用 openPopup() 方法，以便在您悬停时打开弹出窗口。

//function to show popup when hover
const onEachContry = (feature,layer) =>{
  const contryName = feature.properties.NAME_1;   
  layer.on('mouseover',function (e) {
    layer.bindPopup(contryName).openPopup(); // here add openPopup()
  });
}