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

Question

我试图在 React 传单中悬停一个层时显示弹出窗口。我使用 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>
</>

Answer 1

您只需调用 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()
  });
}

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

Show popup on hover a layer in react-leaflet

javascript

css

leaflet

reactjs

react-leaflet