как использовать входное значение, используемое в поле поиска Google реагировать - PullRequest
0 голосов
/ 11 сентября 2018

Как использовать входное значение, используемое в поле поиска реагирования карты Google, которое я хочу вставить в базу данных.

Нет проблем с тем, что окно поиска карты Google работает правильно. enter code here Это мой код, где карта Google работает правильно со значением поиска, но как я могу использовать входное значение поиска для хранения в базе данных, чтобы я мог получить значение отредактируйте его снова.

const _ = require("lodash");
const { compose, withProps, lifecycle } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} = require("react-google-maps");
const { SearchBox } = require("react-google-maps/lib/components/places/SearchBox");

const MapWithASearchBox = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  lifecycle({
    componentWillMount(props) {
      const refs = {}





      if(this.props.lat)
      {
        lat = this.props.lat;
        lng = this.props.lng
      }



      this.setState({
        bounds: null,
        center: {
          lat: lat, lng: lng
         },
        // onChange = (e) => {
        //   this.setState({
        //    location: e.target.value
        //   });
        //   console.log(location);
        // },
        markers: [],
        onMapMounted: ref => {
          refs.map = ref;
        },
        onBoundsChanged: () => {
          this.setState({
            bounds: refs.map.getBounds(),
            center: refs.map.getCenter(),
          })
        },
        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },
        onPlacesChanged: () => {
          console.log(refs.searchBox);
          const places = refs.searchBox.getPlaces();
          const bounds = new google.maps.LatLngBounds();
          places.forEach(place => {
            this.props.onSomeEvent({ latlng: place.geometry.location.lat() + ',' + place.geometry.location.lng()});
            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,
            isMarkerShown : false
          });
          // refs.map.fitBounds(bounds);
        },
        onChange : (e) => {
          // this.setState({
          //   checked: e.target.checked,
          // });
        } ,

      })
    },

  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={15}
    center={props.center}
    onBoundsChanged={props.onBoundsChanged}
  >
    <SearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      controlPosition={google.maps.ControlPosition.TOP_LEFT}
      onPlacesChanged={props.onPlacesChanged}
    >
      <input
        type="text"
        placeholder="Enter Hospital Name..."
        style={{
          boxSizing: `border-box`,
          border: `1px solid transparent`,
          width: `240px`,
          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.isMarkerShown && <Marker position={{ lat:props.lat, lng: props.lng }} />}
    {props.markers.map((marker, index) =>
      <Marker key={index} position={marker.position} />
    )}
  </GoogleMap>
)

export default MapWithASearchBox;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...