Javascript 如何使用外部lat、lng设置中心？

我构建了一个从数据库中提取地址的应用程序。我已经使用geocoder（）获取了地址的纬度和lng，现在我希望每次我按下按钮拉取地址时，它都会更新地图以缩放到该地址和中心。如果我将地址拉到maps组件的外部，可以这样做吗

以下是迄今为止我的地图组件：

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

    },
    componentWillMount() {
      const refs = {}

      this.setState({

        bounds: null,
        center: {
          lat: -35.015742, lng: 138.520858
        },
        markers: [],
        onMapMounted: ref => {
          refs.map = ref;
        },
        onIdle: () => {
          this.setState({
            center: fullPos,
          })
        },
        onBoundsChanged: () => {
          this.setState({
            bounds: refs.map.getBounds(),
            center: refs.map.getCenter(),
          })
        },
        onSearchBoxMounted: ref => {
          console.log("s. mounted");
          refs.searchBox = ref;
        },
        onPlacesChanged: () => {
          console.log("places changed");
          console.log(refs.searchBox)
          console.log(refs)
          const places = refs.searchBox.getPlaces();
          console.log(places);
          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={20}
    center={props.center}
    onBoundsChanged={props.onBoundsChanged}
    mapTypeId={google.maps.MapTypeId.SATELLITE}
    panControl={true}
    scrollwheel={false}
  >
    <SearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      controlPosition={google.maps.ControlPosition.TOP_LEFT}
      onPlacesChanged={props.onPlacesChanged}
    >
      <input
        type="text"
        placeholder="Customized your placeholder"
        value={fullAdd}
        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={fullPos} />
    )}
  </GoogleMap>
);

const-MapWithASearchBox=compose(
用道具({
谷歌地图网址：https://maps.googleapis.com/maps/api/js?key=AIzaSyDYwerCGhOnkM1sNHmSrckp8D1o9hY3mZ4&v=3.exp&libraries=geometry，图纸，位置“，
加载元素：，
集装箱运输：，
mapElement:，
}),
生命周期({
componentDidMount（）{
},
组件willmount（）{
常量引用={}
这是我的国家({
界限：空，
中心：{
lat:-35.015742，液化天然气：138.520858
},
标记：[]，
onMapMounted:ref=>{
refs.map=ref；
},
onIdle:（）=>{
这是我的国家({
中心：fullPos，
})
},
onBoundsChanged:（）=>{
这是我的国家({
边界：refs.map.getBounds（），
中心：refs.map.getCenter（），
})
},
onSearchBoxMounted:ref=>{
控制台日志（“s.安装”）；
refs.searchBox=ref；
},
onPlacesChanged:（）=>{
控制台日志（“更改的位置”）；
console.log（参考搜索框）
console.log（参考文献）
const places=refs.searchBox.getPlaces（）；
控制台日志（位置）；
const bounds=new google.maps.LatLngBounds（）；
places.forEach（place=>{
if（place.geometry.viewport）{
bounds.union（place.geometry.viewport）
}否则{
扩展（place.geometry.location）
}
});
const nextMarkers=places.map（place=>({
位置：place.geometry.location，
}));
const nextCenter=u.get（nextMarkers'0.position'，this.state.center）；
这是我的国家({
中心：nextCenter，
markers:nextMarkers，
});
//参考地图fitBounds（bounds）；
},
})
},
}),
用ScriptJS，
用谷歌地图
)（道具=>
{props.ismarkersown&&(
)}
);

其中fullPos是lat，lng变量，我一直在不同的领域使用，希望它能起作用

将地址拉到maps组件外部

不确定您的意思是将新地址作为一个道具从组件外部传递给它，然后，也许您可以使用组件将更新，并创建一些漂亮的条件（以避免糟糕的无休止循环），并且只检查passedAddressProp是否已更改，然后您可以执行以下操作：

this.setState({center:passedAddressProp}）

或

很明显，你的意思是我得到的这个地址离这个组件太远了，所以他们不可能通信，那么可能解决方案就在于redux/mobx（无论你喜欢/使用哪个）当地址更改时，您可以使用新地址启动一个操作，该组件监听状态的这一部分，并且组件内部的一些漂亮条件将更新，您可以在状态的全局部分更改时更改this.state.center