Question

我已经将google maps添加到我的react应用程序中，但是我需要帮助以找到一种基于用户输入来标记位置的方法。

注意：实际上，我认为从用户那里获取邮政编码比获取lat或lng更容易；我只是想根据用户的输入动态显示标记，并将标记保存在数组中。

有人可以告诉我如何根据存储在数组中的用户输入来标记位置吗？我还能从用户那里得到什么其他数据以用于在Google地图上标记位置；有什么建议么？

在下面的组件中，我检索用户先前在表单中输入的邮政编码数组，并添加google地图：

 const AnyReactComponent = ({ text }) => <div>{text}</div>;
 class History extends Component {
  static defaultProps = {
    center: {
    lat: 59.95,
    lng: 30.33
    },
    zoom: 11
  };
static async getInitialProps(props) {
  let zipcodecounts = await tracker.methods.zipCounts().call();

  let zipcodesArray = await Promise.all(
    Array(parseInt(zipcodecounts))
      .fill()
      .map((element, index) => {
        return tracker.methods.zipcodes(props.query.id,index).call();
      })
  );
  console.log(zipcodesArray);

 return {
   zipcodesArray
 };
}

render(){
 return(
   <div style={{ height: '100vh', width: '100%' }}>
     <GoogleMapReact
       bootstrapURLKeys={{ key: "AIzaS...."}}
       defaultCenter={this.props.center}
       defaultZoom={this.props.zoom}
     >
       <AnyReactComponent
         lat={59.955413}
         lng={30.337844}
         text="My Marker"
       />
     </GoogleMapReact>
   </div>
 );
 }
}
export default History;

例如，zipcodesArray是这样的：['S7K5Z9'，'S7K2P5']（加拿大邮政编码格式），但是它针对不同的用户而有所变化

如何根据用户输入标记位置？ google-map-react

0 个答案: