当用户按下搜索所需地址时，React Google Map API 不会放大

Question

这是一段代码，需要更改什么以便当用户点击搜索时它会放大到更接近输入的地址？类似于 google 地图网站。总体目标是拥有与 google maps website 类似的搜索功能，当用户搜索时，他们会放大到该位置。

   const AddressSearchDiv = styled.div`
        position: relative;
         svg {
            position: absolute;
            right: 10px;
            top: 5px;
          }
        `;
        const SeachInput = styled.input`
          width: 100%;
          border: 0;
          background: none;
          padding: 15px 40px 15px 15px;
          font-size: 16px;
          font-weight: 500;
          outline: 0;
          box-shadow: 0;
          @media screen and (max-width: 767px) {
            padding: 20px 40px 20px 40px;
          }
        `;
        const PlacesSearchBox = forwardRef(
          (
            { places, onLocationInputChange, onPlacesChange, onEnterKeyUp, value },
            ref
          ) => {
            const [searchBox, setSearchBox] = useState(null);
            const handlePlacesChanged = () => {
              let address;
              const place = searchBox.getPlaces()[0];
              if (place.address_components) {
                address = mapAddressComponents(place.address_components);
              }
        
              onPlacesChange(address, place);
              onLocationInputChange({
                target: {
                  value: place.formatted_address,
                },
              });
            };
             useEffect(() => {
              if (places.SearchBox && !searchBox) {
                setSearchBox(new places.SearchBox(ref.current));
              }
        
              return () => {
                document.querySelector(".pac-container") &&
                  document.querySelector(".pac-container").remove();
              };
            }, [places.SearchBox, searchBox, ref]);
        
            useEffect(() => {
              if (searchBox) {
                searchBox.addListener("places_changed", handlePlacesChanged);
              }
              // eslint-disable-next-line
            }, [searchBox]);
               return (
              <AddressSearchDiv>
                <SeachInput
                  id="location-input"
                  ref={ref}
                  placeholder="City, State, or Zip code"
                  tabIndex="2"
                  type="text"
                  onChange={onLocationInputChange}
                  onKeyUp={onEnterKeyUp}
                  value={value}
                />
                <MapPinIcon color="#333" size={24} />
              </AddressSearchDiv>
            );
          }
        );
        
        export default PlacesSearchBox;

Answer 1

您可以为中心和缩放设置状态。每次您从自动完成中选择一个地点时，您都​​会将您的中心状态更改为所选地点和更高的缩放级别以近距离查看该地点。

这是一个 sample code 和下面的代码片段：

/*global google*/
import React, { Component } from "react";
import {
  withGoogleMap,
  withScriptjs,
  GoogleMap,
  Marker
} from "react-google-maps";
import Autocomplete from "react-google-autocomplete";
class Map extends Component {
  state = {
    center: { lat: 40.756795, lng: -73.954298 },
    zoom: 13
  };

  onPlaceSelected = place => {
    this.setState({
      center: place.geometry.location,
      zoom: 18
    });
  };

  render() {
    const Auto = props => (
      <Autocomplete
        style={{ width: "90%" }}
        onPlaceSelected={place => {
          console.log(place);
          this.onPlaceSelected(place);
        }}
        types={["(regions)"]}
      />
    );
    const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap center={this.state.center} zoom={this.state.zoom}>
        <Marker position={this.state.center} />
      </GoogleMap>
    ));

    return (
      <div>
        <div style={{ margin: `15px` }}>
          <h3>Choose another destination</h3>
          <Auto />
        </div>
        <GoogleMapExample
          containerElement={<div style={{ height: `500px`, width: "500px" }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default Map;