将Google地图的内容反映为可拖动的标记位置

Question

大家好我想把infowindows内容设置为可拖动的标记位置，任何人都可以帮助我，我尝试在onDragEnd函数中设置状态但抛出错误说setState（{dragEndPos：formatted_address}）; 不是一个功能

MapWithASearchBox.js

#include <stdio.h>
#include <stdlib.h>

void func(int *newvar);

int main(int argc, char *argv[]) 
{
    int *var;
    func(var);

    system("pause");
    return 0;
}

void func(int *newvar)
{
    int *tmp = malloc(sizeof(int));
    newvar = tmp;
}

我正在获取当前标记位置的格式化地址，但我需要在infowindow和state中设置它，这样我就可以使用该状态值并将其放在ui中。

我认为我们不能在那里设置状态，所以我只是用另一种方式 我得到了它的工作，除了react-google-maps。

这是我的工作范例。

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=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  lifecycle({
    componentWillMount() {
      const refs = {}

      this.setState({
        currentPos:'',
        bounds: null,
        center: {
          lat: 41.9, lng: -87.624
        },
        markers: [],
        onMapMounted: ref => {
          refs.map = ref;
        },
        onBoundsChanged: () => {
          this.setState({
            bounds: refs.map.getBounds(),
            center: refs.map.getCenter(),
          })
        },
        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },
      onMarkerDrag: (e) => {
      //console.log(e.latLng);
      var geocoder = new google.maps.Geocoder();
      var myLatlng = new google.maps.LatLng(e.latLng.lat(),e.latLng.lng());
      var dragEndPositions;

      geocoder.geocode({'latLng': myLatlng }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          //console.log("iam geocoder: "+results[0].formatted_address);
          dragEndPositions = results[0].formatted_address;
          console.log(dragEndPositions)
        }
        }
        });
         this.setState({currentPos:dragEndPositions}, () => {
           console.log("setting state: "+this.state.currentPos)
         })

    },
        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,
          });
          // refs.map.fitBounds(bounds);
        },
      })
    },
  }),
  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="Customized your placeholder"
        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.markers.map((marker, index) =>
      <Marker
       draggable
       onDrag={props.onMarkerDrag}
       position={{ lat: -34.397, lng: 150.644 }}
       onClick={props.onToggleOpen}
      >
       {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>

       <div>{this.state.currentPos}</div>
       </InfoWindow>}
      </Marker> />
    )}
  </GoogleMap>
);