我可以通过 react-google-maps/api 使用 Google 地方信息吗？

Question

我厌倦了使用谷歌位置来抓取一些餐厅标记，但我不确定如何将它与“@react-google-maps/api”结合使用。

我看到了这篇文章： Google map 与 react-google-maps API

这似乎在“地方”传递给装载机，但我不确定在那之后该怎么做，比如我该怎么做这样的事情

var map;
var service;
var infowindow;

function initMap() {
  var sydney = new google.maps.LatLng(-33.867, 151.195);

  infowindow = new google.maps.InfoWindow();

  map = new google.maps.Map(
      document.getElementById('map'), {center: sydney, zoom: 15});

  var request = {
    query: 'Museum of Contemporary Art Australia',
    fields: ['name', 'geometry'],
  };

  var service = new google.maps.places.PlacesService(map);

  service.findPlaceFromQuery(request, function(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
      map.setCenter(results[0].geometry.location);
    }
  });
}

Answer 1

您提供的代码片段使用Find Place From Query ，这是Google Maps JavaScript API 的 Places Library下的服务之一。

@react-google-maps/api是一个库，它的创建是为了提供与 Google Maps JavaScript API 的非常简单的绑定，并且正如文档所述，它只有用于 Places Library 的 Autocomplete 和 StandaloneSearchBox 组件。

如果您想使用 Find Place From Query，您可以通过在 map 加载时调用findPlaceFromQuery()方法来实现它。 您将在下面的代码片段中看到，我在onMapLoad() function 中调用它。 我还将state用于center和coordsResults ，它们将保存 findPlaceFromQuery 结果的数组。 然后，在显示结果标记之前，我将使用条件检查coordsResults state。 下面是示例代码和代码片段：

import React from "react";

import { GoogleMap, Marker, InfoWindow } from "@react-google-maps/api";

let coords = [];

class Map extends React.Component {
  state = {
    center: { lat: -33.867, lng: 151.195 },
    coordsResult: []
  };

  onMapLoad = map => {
    let request = {
      query: "Museum of Contemporary Art Australia",
      fields: ["name", "geometry"]
    };

    let service = new google.maps.places.PlacesService(map);

    service.findPlaceFromQuery(request, (results, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          coords.push(results[i]);
        }

        this.setState({
          center: results[0].geometry.location,
          coordsResult: coords
        });
      }
    });
  };

  render() {
    return (
      <div>
        <GoogleMap
          center={this.state.center}
          zoom={13}
          onLoad={map => this.onMapLoad(map)}
          mapContainerStyle={{ height: "400px", width: "800px" }}
        >
          {this.state.coordsResult !== [] &&
            this.state.coordsResult.map(function(results, i) {
              return (
                <Marker key={i} position={results.geometry.location}>
                  <InfoWindow 
                options={{ maxWidth: 300 }}>
                    
                      <span>{results.name}</span>
                    
                  </InfoWindow>
                </Marker>
              );
            })}
        </GoogleMap>
      </div>
    );
  }
}

export default Map;