如何在 React 传单中显示来自 localStorage 的标记位置

Question

我试图在页面刷新后显示保存的标记位置，但到目前为止还没有成功。 App部署在这里：https://master.d8pjybx1mf2s7.amplifyapp.com

查找用户 2 是否在用户 1 的范围内是一个基本的app。我们可以通过在地图上单击来标记位置。

 handleClick(e){
    this.setState({ currentPos: e.latlng });
    localStorage.setItem('Poslat1', this.state.currentPos.lat);
    localStorage.setItem('Poslon1', this.state.currentPos.lng);
  }
  
  render() {
    return (
      
      <div>
        <Map center={this.props.center} zoom={this.props.zoom} onClick={this.handleClick}>
          <TileLayer
              url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
          />
          
          { this.state.currentPos && <MyMarker icon={LocationIcon}  position={this.state.currentPos}>

          </MyMarker>}
        {this.state.currentPos && <Circle center={this.state.currentPos} pathOptions={{fillColor: 'blue' }} radius={1000} />}
        </Map>
      </div>
    );
  }

我可以使用用于查找范围的 localStorage 来存储位置数据，我想我也可以使用相同的方法以某种方式在地图上保存标记位置，但它不起作用。

感谢任何帮助。谢谢

Answer 1

安装组件时检查 lat1 和 lon1 是否存在于您的 localStorage 中，以及它们是否改变了组件状态

componentDidMount() {
   const lat1 = localStorage.getItem("Poslat1");
   const lon1 = localStorage.getItem("Poslon1");
   if (lat1 && lon1) this.setState({ currentPos: [lat1, lon1] });
}

然后刷新后它们将被保留。

Demo

如何在 React 传单中显示来自 localStorage 的标记位置

How to show marker location from localStorage in react leaflet

javascript

leaflet

reactjs

react-leaflet