在 React 中使用 Google Place Autocomplete API

Question

我想在我的反应组件中有一个自动完成位置搜索栏，但不知道我将如何实现它。 文件 说要包括

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>

在 HTML 文件中，然后有一个指向元素的初始化函数——我将如何使用我的 React 组件/JSX 执行此操作？我想我必须导入 api 链接，但我不知道从那里去哪里。

 import React from 'react';
import "https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap";

const SearchBar = () => (
    <input type="text" id="search"/> //where I want the google autocomplete to be
);

export default SearchBar;

原文由 Adam.V 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

谷歌地图 API 通过静态加载 import ：

 import "https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap";

不受支持，您需要为此考虑不同的选项：

• 通过 /public/index.html 文件引用 Google Maps API JS 库： <script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places"></script>
• 或者 动态 加载 JS 资源，例如使用 这个库

现在关于 SearchBar 组件，下面的示例演示了如何基于 这个官方示例 实现一个简单版本的 Place Autocomplete （不依赖于 Google Map 实例）

 import React from "react";
/* global google */

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.autocompleteInput = React.createRef();
    this.autocomplete = null;
    this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
  }

  componentDidMount() {
    this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteInput.current,
        {"types": ["geocode"]});

    this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
  }

  handlePlaceChanged(){
    const place = this.autocomplete.getPlace();
    this.props.onPlaceLoaded(place);
  }

  render() {
    return (
        <input ref={this.autocompleteInput}  id="autocomplete" placeholder="Enter your address"
         type="text"></input>
    );
  }
}

原文由 Vadim Gremyachev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个使用 ES6 + React Hooks 的解决方案：

首先，创建一个 useGoogleMapsApi 挂钩来加载外部脚本：

 import { useEffect, useState, useCallback } from 'react'
import loadScript from 'load-script'
import each from 'lodash/each'

var googleMapsApi
var loading = false
var callbacks = []

const useGoogleMapsApi = () => {
  const [, setApi] = useState()

  const callback = useCallback(() => {
    setApi(window.google.maps)
  }, [])

  useEffect(() => {
    if (loading) {
      callbacks.push(callback)
    } else {
      if (!googleMapsApi) {
        loading = true
        loadScript(
          `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=places`,
          { async: true },
          () => {
            loading = false
            googleMapsApi = window.google.maps
            setApi(window.google.maps)
            each(callbacks, init => init())
            callbacks = []
          })
      }
    }
  }, [])

  return googleMapsApi
}

export default useGoogleMapsApi

然后，这是您的输入组件：

 import React, { useRef, useEffect, forwardRef } from 'react'
import useGoogleMapsApi from './useGoogleMapsApi'

const LocationInput = forwardRef((props, ref) => {
  const inputRef = useRef()
  const autocompleteRef = useRef()
  const googleMapsApi = useGoogleMapsApi()

  useEffect(() => {
    if (googleMapsApi) {
      autocompleteRef.current = new googleMapsApi.places.Autocomplete(inputRef.current, { types: ['(cities)'] })
      autocompleteRef.current.addListener('place_changed', () => {
        const place = autocompleteRef.current.getPlace()
        // Do something with the resolved place here (ie store in redux state)
      })
    }
  }, [googleMapsApi])

  const handleSubmit = (e) => {
    e.preventDefault()
    return false
  }

  return (
    <form autoComplete='off' onSubmit={handleSubmit}>
      <label htmlFor='location'>Google Maps Location Lookup</label>
      <input
        name='location'
        aria-label='Search locations'
        ref={inputRef}
        placeholder='placeholder'
        autoComplete='off'
      />
    </form>
  )
}

export default LocationInput

中提琴！

原文由 Allan of Sydney 发布，翻译遵循 CC BY-SA 4.0 许可协议