如何解决如何飞到反应传单中的某个位置
所以我对反应和传单真的很陌生,但我想要做的基本上就是让用户输入一些输入,然后在他们按下回车键后,触发一个事件,然后该事件飞向从该输入生成的坐标。我正在使用地理编码并且成功生成经纬度坐标。但是我不确定如何让地图飞到那个位置。这是我目前所拥有的:
import './App.css';
import * as React from "react";
import { ChakraProvider } from "@chakra-ui/react";
import { MapContainer,TileLayer,Marker,Popup,useMapEvents } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import Geocode from "react-geocode";
import SearchBar from './SearchBar';
class App extends React.Component {
constructor(props){
super(props)
this.state = {
position: [43.653225,-79.383186]
}
}
mapRef = React.createRef();
changePos (pos) {
this.setState({position: pos});
this.mapRef.current.flyTo(pos);
}
render () {
return (
<ChakraProvider resetCSS = {false}>
<div className = "App">
<div id="title">
<h1>
CovidStopSpots
</h1>
<p>A responsive tracker for Covid-19.</p>
<SearchBar changePos = {this.changePos.bind(this)}></SearchBar>
</div>
<div id="map">
<MapContainer center={this.state.position} zoom={13} scrollWheelZoom={false} ref={this.mapRef}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[43.653225,-79.383186]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
</div>
</ChakraProvider>
)
}
}
export default App;
当前代码也在产生这个错误:
Unhandled Rejection (TypeError): Cannot read property 'flyTo' of null
解决方法
在 react-leaflet 版本 3 中,您可以使用 whenCreated
道具获取地图实例,然后当您不想将其用于 MapContainer's
子组件时使用它飞到另一个位置.
this.state = {
position: [43.653225,-79.383186],map: null
}
移除 ref 并使用 whenCreated
道具
<MapContainer center={this.state.position} zoom={13} scrollWheelZoom={false} whenCreated={map => this.setState({ map })}>
然后在您的 changePos 事件中使用 this.state.map 飞行
changePos (pos) {
this.setState({position: pos});
const {map} = this.state;
if (map) map.flyTo(pos);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。