如何在 React 中實現 Google map API 搜索自動完成

Question

我正在遵循谷歌地圖的官方指南，並嘗試按照以下方式在我的反應應用程序中實現它：

import React, { Component } from 'react';
import './styles/locationInput.css';

export class locationInput extends Component {
    render() {
        const { values, handleChange } = this.props;

        function initAutocomplete() {
            var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);

            var markers = [];
            searchBox.addListener('places_changed', function() {
              var places = searchBox.getPlaces();

              if (places.length == 0) {
                return;
              }

              markers.forEach(function(marker) {
                marker.setMap(null);
              });
              markers = [];

              var bounds = new google.maps.LatLngBounds();
              places.forEach(function(place) {
                if (!place.geometry) {
                  console.log("Returned place contains no geometry");
                  return;
                }
                var icon = {
                  url: place.icon,
                  size: new google.maps.Size(71, 71),
                  origin: new google.maps.Point(0, 0),
                  anchor: new google.maps.Point(17, 34),
                  scaledSize: new google.maps.Size(25, 25)
                };

                markers.push(new google.maps.Marker({
                  icon: icon,
                  title: place.name,
                  position: place.geometry.location
                }));

                if (place.geometry.viewport) {
                  bounds.union(place.geometry.viewport);
                } else {
                  bounds.extend(place.geometry.location);
                }
              });

            });
          }
          initAutocomplete()
        return (

                <input
                    defaultValue={values.CollegeName}
                    onChange={handleChange('CollegeName')}
                    id="pac-input"
                    className="controls"
                    type="text"
                    placeholder="Search Box"
                />

        );
    }
}

export default locationInput;

我在index.html中初始化了<script>

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

但我收到了這個錯誤

編譯失敗

./src/public/form/lib-component/locationInput.js
  Line 10:24:  'google' is not defined  no-undef
  Line 25:23:  'google' is not defined  no-undef
  Line 33:17:  'google' is not defined  no-undef
  Line 34:19:  'google' is not defined  no-undef
  Line 35:19:  'google' is not defined  no-undef
  Line 36:23:  'google' is not defined  no-undef
  Line 39:22:  'google' is not defined  no-undef
Search for the keywords to learn more about each error.

我的問題是，當我嘗試在普通的html和javascript中實現此代碼時，它完美地工作但沒有反應，所以我怎樣才能讓它在這里工作，我如何指定google在這里的含義？

Answer 1

在您的代碼中用new window.google.maps替換new google.maps 。