我试图在反应传单中悬停图层时显示弹出窗口。我使用 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='© <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>
</>
答案 0 :(得分:2)
您只需调用 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()
});
}