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

Question

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

我看到了这个帖子：Google map with 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

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

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

如果您想使用“从查询中查找地点”，您可以在地图加载时通过调用findPlaceFromQuery() 方法来实现它。您将在下面的代码 sn-p 中看到，我在 onMapLoad() 函数中调用它。我还将state 用于center 和coordsResults，它们将保存findPlaceFromQuery 结果的数组。然后，在显示结果标记之前，我将使用条件检查coordsResults 状态。下面是sample code 和代码 sn-p：

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;