ReactJS谷歌地图自定义：定位地址显示至搜索框实现问询

嘿，作为React新手能搞定谷歌地图的定位功能已经很棒啦！要把获取到的格式化地址显示到搜索输入框里，核心就是用状态（state）来管理输入框的内容，然后在获取到地址的时候更新这个状态，再把输入框和状态绑定起来。下面分步骤给你讲具体怎么改：

1. 确定状态存放位置，分两种场景处理 #

看你的代码，App组件引入了MapWithASearchBox，根据地址获取逻辑的位置，我给你两种场景的代码示例：

场景1：状态放在MapWithASearchBox组件中 #

如果地址获取逻辑就在子组件里，直接在组件内维护输入框状态即可：

// MapWithASearchBox.js
import React from 'react';

class MapWithASearchBox extends React.Component {
  state = {
    latitude: '',
    longitude: '',
    inputAddress: '' // 新增状态存储输入框地址
  };

  // 定位图标点击事件处理函数
  handleLocationClick = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;
        
        // 调用谷歌地图Geocoder逆地理编码获取格式化地址
        const geocoder = new window.google.maps.Geocoder();
        const latlng = new window.google.maps.LatLng(lat, lng);
        
        geocoder.geocode({ latLng: latlng }, (results, status) => {
          if (status === window.google.maps.GeocoderStatus.OK && results[0]) {
            const formattedAddress = results[0].formatted_address;
            console.log(formattedAddress); // 保留原控制台输出
            
            // 关键：更新state，把地址同步到inputAddress
            this.setState({
              latitude: lat,
              longitude: lng,
              inputAddress: formattedAddress
            });
          }
        });
      });
    }
  };

  render() {
    return (
      <div>
        {/* 搜索输入框：绑定value到state，添加onChange支持手动输入 */}
        <input
          type="text"
          value={this.state.inputAddress}
          onChange={(e) => this.setState({ inputAddress: e.target.value })}
          placeholder="搜索位置..."
        />
        {/* 定位图标按钮，绑定点击事件 */}
        <button onClick={this.handleLocationClick}>📍</button>
        {/* 你的谷歌地图组件 */}
        {/* ... */}
      </div>
    );
  }
}

export default MapWithASearchBox;

场景2：状态放在App组件中（全局管理） #

如果希望地址状态由父组件统一管理，就把状态放在App里，通过props传递给子组件：

// App.js
import React from 'react';
import MapWithASearchBox from '../components/main_layout/location';

class App extends React.Component {
  state = {
    latitude: '',
    longitude: '',
    inputAddress: '' // 父组件维护地址状态
  };

  // 定义更新地址的函数，传给子组件
  updateInputAddress = (address) => {
    this.setState({ inputAddress: address });
  };

  render() {
    return (
      <MapWithASearchBox
        inputAddress={this.state.inputAddress}
        updateAddress={this.updateInputAddress}
        latitude={this.state.latitude}
        longitude={this.state.longitude}
      />
    );
  }
}

export default App;

然后在MapWithASearchBox中调用父组件的函数更新地址，并绑定输入框：

// MapWithASearchBox.js
import React from 'react';

class MapWithASearchBox extends React.Component {
  handleLocationClick = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;
        
        const geocoder = new window.google.maps.Geocoder();
        const latlng = new window.google.maps.LatLng(lat, lng);
        
        geocoder.geocode({ latLng: latlng }, (results, status) => {
          if (status === window.google.maps.GeocoderStatus.OK && results[0]) {
            const formattedAddress = results[0].formatted_address;
            console.log(formattedAddress);
            
            // 调用父组件传的函数更新地址
            this.props.updateAddress(formattedAddress);
          }
        });
      });
    }
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.props.inputAddress}
          onChange={(e) => this.props.updateAddress(e.target.value)}
          placeholder="搜索位置..."
        />
        <button onClick={this.handleLocationClick}>📍</button>
        {/* 地图组件 */}
        {/* ... */}
      </div>
    );
  }
}

export default MapWithASearchBox;

2. 额外注意事项 #

• 如果你用的是谷歌地图官方的Places SearchBox组件，需要额外处理它的places_changed事件，确保自动补全的地址也能同步到inputAddress状态。
• 一定要给输入框加onChange事件，否则输入框会变成只读状态，用户无法手动修改内容。

这样改完之后，点击定位图标获取到地址后，就会自动显示在搜索输入框里啦！

内容的提问来源于stack exchange，提问作者Ashok