Javascript 我可以将Google Places与react Google maps/api一起使用吗？

我已经厌倦了使用GooglePlaces抓取一些餐厅标记，但我不知道如何将其与“@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);
    }
  });
}

var映射；
var服务；
var信息窗口；
函数initMap（）{
var sydney=new google.maps.LatLng（-33.867151.195）；
infowindow=new google.maps.infowindow（）；
map=新建google.maps.map(
getElementById（'map'），{中心：sydney，缩放：15}）；
var请求={
查询：“澳大利亚当代艺术博物馆”，
字段：['name'，'geometry']，
};
var service=newgoogle.maps.places.PlacesService（地图）；
service.findPlaceFromQuery（请求、函数（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i

您提供的代码片段正在使用，它是下的服务之一

是一个库，创建该库是为了提供到Google Maps JavaScript API的非常简单的绑定，正如文档所述，它只有用于Places库的Autocomplete和StandaloneSearchBox组件

如果要使用“从查询中查找位置”，可以在地图加载时调用

findPlaceFromQuery（）

方法来实现它。您将在下面的代码片段中看到，我在

onMapLoad（）函数中调用它。我还使用
state
来表示
center
和
coordsResults
，它们将保存findPlaceFromQuery结果的数组。然后，在显示结果标记之前，我将使用一个条件检查
coordsResults
状态。下面是代码和代码片段：

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;

从“React”导入React；
从“@react google maps/api”导入{GoogleMap，Marker，InfoWindow}；
设coords=[]；
类映射扩展了React.Component{
状态={
中心：{lat:-33.867，lng:151.195}，
合作结果：[]
};
onMapLoad=map=>{
让请求={
查询：“澳大利亚当代艺术博物馆”，
字段：[“名称”、“几何体”]
};
let service=new google.maps.places.PlacesService（地图）；
service.findPlaceFromQuery（请求，（结果，状态）=>{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i
{this.state.coordsResult！==[]&&
this.state.coordsResult.map（函数（结果，i）{
返回(
{results.name}
);
})}
);
}
}
导出默认地图；
您正在使用的库没有实现Places服务（显然只有Autocomplete和SearchBox）。