React-Google-Maps API：如何搜索搜索结果的当前位置？

编程问答 2022-06-02

问题描述

我正在尝试构建与 Airbnb 上类似的地图，您可以在其中拖动地图时查看地点标记。我想使用 Google Places API 在地图上搜索“治疗中心”并放置标记。

我一直在使用新的、重新编写的@react-google-maps/api。到目前为止，我能够创建一个搜索框和一个自动完成并获取它们的纬度和经度，但两者都只提供特定的位置而不是最相似的搜索（例如，如果你在谷歌地图上搜索 Taco Bell，它会显示您附近的几个选项）。下面的代码显示了一个带有搜索框的地图：

import { GoogleMap,LoadScript,Marker,StandaloneSearchBox,Autocomplete } from '@react-google-maps/api';

class HeaderMap extends Component {
  constructor (props) {
    super(props)

    this.autocomplete = null

    this.onLoad = this.onLoad.bind(this)
    this.onPlaceChanged = this.onPlaceChanged.bind(this)

    this.state = {
      currentLocation: {lat: 0,lng: 0},markers: [],zoom: 8
    }
  }
  

  componentDidMount() {
    navigator?.geolocation.getCurrentPosition(({coords: {latitude: lat,longitude: lng}}) => {
      const pos = {lat,lng}
      this.setState({currentLocation: pos})  
    })
  }

  onLoad (autocomplete) {
    console.log('autocomplete: ',autocomplete)

    this.autocomplete = autocomplete
  }


  onPlaceChanged() {
    if (this.autocomplete !== null) {
      let lat = this.autocomplete.getPlace().geometry.location.lat()
      let long = this.autocomplete.getPlace().geometry.location.lat()
    } else {
      console.log('Autocomplete is not loaded yet!')
    }
  }

  render() {
    return (
      <LoadScript
        googleMapsApiKey="API_KEY_HERE"
        libraries={["places"]}
      >
        <GoogleMap
          id='search-box-example'
          mapContainerStyle={containerStyle}
          center={this.state.currentLocation}
          zoom={14}
          // onDragEnd={search for centers in current location}
        >
          <Marker key={1} position={this.state.currentLocation} />
          <Autocomplete
            onLoad={this.onLoad}
            onPlaceChanged={this.onPlaceChanged}
          >
            <input
              type="text"
              placeholder="Customized your placeholder"
              style={inputStyles}
            />
          </Autocomplete>
        </GoogleMap>
      </LoadScript>
    );
  }
}

如何根据关键字自动搜索位置的边界并获取每个结果的经纬度？感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-maps-api-3react-google-mapsreactjsreactjs