如何解决无法配置示例事件以使react-leaflet v3播放
我正在尝试为以下示例https://react-leaflet.js.org/docs/example-events设置一个React应用,但由于编译错误而无法使其正常运行。 v2中的相同示例对我有用。
import React,{Component,useState} from 'react'
import { MapContainer,TileLayer,Marker,useMapEvents } from 'react-leaflet'
import Popup from 'react-leaflet-editable-popup'
function LocationMarker() {
const [position,setPosition] = useState(null)
const map = useMapEvents({
click() {
map.locate()
},locationfound(e) {
setPosition(e.latlng)
map.flyTo(e.latlng,map.getZoom())
},})
return position === null ? null : (
<Marker position={position} removable editable>
<Popup>You are here</Popup>
</Marker>
)
}
class Map extends Component{
render(){
return(
<MapContainer
center={{ lat: 51.505,lng: -0.09 }}
zoom={13}
scrollWheelZoom={false}
id="mapId">
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LocationMarker />
</MapContainer>
)
}
}
export default Map;
如果我不使用类,则会出现渲染不足的错误。如果我尝试使用该功能将不起作用。 任何帮助将不胜感激
解决方法
我发现了问题,并且与
import Popup from 'react-leaflet-editable-popup'
该软件包与react-leaflet v3不兼容
这个小小的修改使我的示例崩溃了。
如果不进行此编辑,它将起作用
尝试
import React,{Component,useState} from 'react'
import { MapContainer,TileLayer,Marker,useMapEvents } from 'react-leaflet'
import Popup from 'react-leaflet-editable-popup'
function LocationMarker(props) {
const [position,setPosition] = useState(null)
const map = useMapEvents({
click() {
map.locate()
},moveend() {
let center = map.getCenter();
let zoom = map.getZoom();
props.effectOn.setState(state => {
state.lat = center.lat;
state.lng = center.lng;
return { ...state }
});
},locationfound(e) {
setPosition(e.latlng)
map.flyTo(e.latlng,map.getZoom())
},})
return position === null ? null : (
<Marker position={position} removable editable>
<Popup>You are here</Popup>
</Marker>
)
}
class Map extends Component{
state = {
lat: 35.76218444303944,lng: 51.33657932281495
};
render(){
return(
<MapContainer
center={[this.state.lat,this.state.lng]}
zoom={13}
scrollWheelZoom={false}
id="mapId">
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LocationMarker effectOn={this}/>
</MapContainer>
)
}
}
export default Map;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。