前端进阶（十三）

import { LoadScript, GoogleMap, Marker, InfoWindow } from '@react-google-maps/api'

const map = () => {
  return (
  	<GoogleMap
      center={center}
      zoom={zoom}
      mapContainerStyle={{
        width: '100%',
        height: '100%',
        ...mapContainerStyle,
      }}
      {...otherProps}
    >
      {children}
      <Marker
        key={`${coord.lat}-${coord.lng}`}
        position={coord}
        icon={{
          url,
          size,
        }}
        onClick={() => {
          setInfoCoord(coord)
        }}
      />
    </GoogleMap>
  )
}

import { useGoogleMap, useJsApiLoader } from '@react-google-maps/api'

const react = () => {
  const map = useGoogleMap()
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: GOOGLE_MAP_API_KEY,
    libraries: ['drawing', 'places', 'visualization', 'marker'],
  })
  
  map.setCenter()
}

import React from 'react';
import { GoogleMaps } from 'google-maps';
import PlacesAutocomplete from 'react-places-autocomplete';

class App extends React.Component {
    handleSelect = address => {
        console.log('Selected:', address);
    };

    render() {
        return (
            <PlacesAutocomplete
                wrapperElement={<div style={{ width: '200px' }} />}
                onSelect={this.handleSelect}
            >
                {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
                    <input {...getInputProps({ placeholder: 'Search Places' })} />
                    {suggestions.map(suggestion => (
                        <div {...getSuggestionItemProps({ suggestion })}>
                            {suggestion.description}
                        </div>
                    ))}
                </PlacesAutocomplete>
            );
    }
}