我正在尝试为我的传单地图创建一个信息面板，如下所示：leaflet-info-control。此外，我使用react和react-leaflet。要访问全局传单地图对象，react-leaflet提供了该useLeaflet()挂钩。
我的代码存在的问题是：我可以看到我的组件已渲染，但实际上是在地图后面渲染的。如何将div添加到地图/在地图前面？
import {useLeaflet} from "react-leaflet";
import React, {useEffect} from 'react';
function MapInfoControl({getColor}) {
const leafletContext = useLeaflet();
const grades = [95, 75, 50, 30, 25];
useEffect(() => {
console.log(leafletContext) // access the LeafletContext object.
});
return (
<div className="legend">
{
grades.map((grade, i) => (
<React.Fragment key={i}>
<i className="legend-color-box" style={{background: getColor(grades[i])}}/>
{
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+')
}
</React.Fragment>
)
)
}
)
}
</div>
);
}
export default MapInfoControl;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句