Question

我正在尝试在我的应用程序中实现react-google-maps，它应该是一个非常简单的组件。基本上，我希望用户只能使用“搜索框”选择一个位置，然后将此位置保存在我的数据库中。稍后，当打开同一个屏幕时，组件必须从我的数据库中检索标记值。

react-google-maps一直是我尝试实现它的选择。 https://tomchentw.github.io/react-google-maps/#usage--configuration

“使用SearchBox映射”似乎为我提供了最佳实现。

我的问题是我很反应，代码示例对我来说似乎有点复杂。我已经完成了他们提供的所有5个步骤，但我无法超越它。

我试图在没有这种HOC技术的情况下编写代码，但是总有一些我无法解决的问题。

有人可以帮助我尝试将标记值传递给组件吗？我的意思是，我找到了一个解决方案来传递纬度并延伸到标记，但我该如何控制它？另外，我需要设置默认中心，但需要使用状态进行控制，而我无法将值传递给它。

这是我要导出的课程：

export default class extends React.Component {   
  render() {
   let { model } = this.props;
   console.log(model)
   let lat = model.value.latitudeGeoreferencia
   let long = model.value.longitudeGeoreferencia

   return (
    <MapWithASearchBox
     lat={lat}
     long={long}
    />
   )   
   } 
 }

如您所见，我正在向MapWithASearchBox发送从模型中检索到的值。

现在，这是组件：

const MapWithASearchBox = compose(
  withProps({
    googleMapURL: "myKey",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `300px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  lifecycle({
    componentWillMount() {
      const refs = {}
      this.setState({
        bounds: null,
        center: {
        //lat:parseFloat(props.lat),lng:parseFloat(props.long)
         //{{lat:32.76880048,lng:-79.90905762}}
          lat: -18.245630, lng: -45.222387
    },
    markers: [],
    onMapMounted: ref => {
      refs.map = ref;
    },
    onBoundsChanged: () => {
      this.setState({
        bounds: refs.map.getBounds(),
        center: refs.map.getCenter(),
      })
    },
    onSearchBoxMounted: ref => {
      refs.searchBox = ref;
    },
    onPlacesChanged: () => {
      const places = refs.searchBox.getPlaces();
      const bounds = new google.maps.LatLngBounds();
       //
         places.forEach(place => {
        if (place.geometry.viewport) {
          bounds.union(place.geometry.viewport)
        } else {
          bounds.extend(place.geometry.location)
        }
      });
      const nextMarkers = places.map(place => ({
        position: place.geometry.location,
      }));
      const nextCenter = _.get(nextMarkers, '0.position', this.state.center);
       //
      this.setState({
        center: nextCenter,
        markers: nextMarkers,
        oldValue: false
      });
      // refs.map.fitBounds(bounds);
    },
  })
    },
  }),
   withScriptjs,
   withGoogleMap
   )(props =>
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={15}
     center={{lat:parseFloat(props.lat),lng:parseFloat(props.long)}}
    onBoundsChanged={props.onBoundsChanged}

<SearchBox
  ref={props.onSearchBoxMounted}
  bounds={props.bounds}
  controlPosition={google.maps.ControlPosition.TOP_LEFT}
  onPlacesChanged={props.onPlacesChanged}

  <input
    type="text"
    placeholder="Digite aqui o endereço..."
    style={{
      boxSizing: `border-box`,
      border: `1px solid transparent`,
      width: `440px`,
      height: `32px`,
      marginTop: `27px`,
      padding: `0 12px`,
      borderRadius: `3px`,
      boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
      fontSize: `14px`,
      outline: `none`,
      textOverflow: `ellipses`,
    }}
  />
</SearchBox>
{!props.markers ? props.markers.map((marker, index) =>
  <Marker key={index}
    position={marker.position}
   />
):
  <Marker position={{lat:parseFloat(props.lat),lng:parseFloat(props.long)}} />
    }
 //
 </GoogleMap>
  );

第一次呈现组件时，NextMarkers为空，因此代码将呈现从数据库中检索到的Maker。但是，中心怎么样？如何将这些值发送到中心？有更好的方法吗？

将标记值传递和检索到react-google-maps

0 个答案: