当然可以实现！这种在组件外部触发地图定位的需求非常常见，我给你捋清楚具体的实现思路和代码示例：

通过状态提升或者全局状态管理，把需要定位的经纬度状态从地图组件外部传递进去，让地图组件监听这个状态变化，自动调整视图位置和缩放级别。

1. 在外部组件（比如父组件）管理经纬度状态 #

首先，把获取地址、解析经纬度的逻辑放到地图组件的父组件里，同时维护一个状态来存储目标经纬度：

import React, { useState } from 'react';
import geocoder from 'geocoder';
import MapWithASearchBox from './MapWithASearchBox';

const AddressLocator = () => {
  // 存储目标经纬度，初始为null
  const [targetLocation, setTargetLocation] = useState(null);
  // 定义默认缩放级别，可根据需求调整
  const defaultZoom = 14;

  // 点击按钮时的处理函数
  const handleFetchAndLocate = async () => {
    try {
      // 1. 从数据库获取地址（替换成你的实际数据库查询逻辑）
      const address = await fetchAddressFromDatabase();
      
      // 2. 用geocoder将地址转为经纬度
      const geocodeResult = await geocoder.geocode(address);
      const { lat, lng } = geocodeResult.results[0].geometry.location;
      
      // 3. 更新目标位置状态
      setTargetLocation({ lat, lng });
    } catch (error) {
      console.error('地址解析失败:', error);
      alert('无法解析该地址，请检查地址是否正确');
    }
  };

  return (
    <div>
      <button onClick={handleFetchAndLocate}>获取地址并定位</button>
      {/* 将目标位置和缩放级别传递给地图组件 */}
      <MapWithASearchBox 
        targetLocation={targetLocation}
        defaultZoom={defaultZoom}
      />
    </div>
  );
};

// 模拟从数据库获取地址的函数
async function fetchAddressFromDatabase() {
  // 替换成你的实际数据库查询逻辑
  return '北京市朝阳区建国门外大街';
}

export default AddressLocator;

2. 修改地图组件，监听外部传入的状态 #

调整你的MapWithASearchBox组件，让它接收外部传入的状态，并在状态变化时自动调整地图视图，这里有两种实现方式：

方式一：直接操作地图实例（更灵活） #

通过useRef获取地图实例，当目标位置变化时，调用地图的原生方法实现居中和缩放：

import React, { useEffect, useRef } from 'react';
import { compose, withProps, GoogleMap } from 'react-google-maps';

const MapWithASearchBox = ({ targetLocation, defaultZoom, googleMapURL, loadingElement, containerElement, mapElement }) => {
  // 保存地图实例的引用
  const mapRef = useRef(null);

  // 监听目标位置的变化
  useEffect(() => {
    if (targetLocation && mapRef.current) {
      // 让地图居中到目标位置
      mapRef.current.panTo(targetLocation);
      // 设置缩放级别
      mapRef.current.setZoom(defaultZoom);
    }
  }, [targetLocation, defaultZoom]);

  return (
    <GoogleMap
      ref={mapRef}
      // 默认中心设为通用位置，比如世界地图中心
      defaultCenter={{ lat: 0, lng: 0 }}
      defaultZoom={2}
      googleMapURL={googleMapURL}
      loadingElement={loadingElement}
      containerElement={containerElement}
      mapElement={mapElement}
    />
  );
};

export default compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=你的API_KEY&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  })
)(MapWithASearchBox);

方式二：通过Props控制地图的center和zoom #

这种方式更符合React的数据流理念，直接把目标位置和缩放级别绑定到地图组件的属性上：

// 修改MapWithASearchBox的返回部分
return (
  <GoogleMap
    // 有目标位置时用它，否则用默认中心
    center={targetLocation || { lat: 0, lng: 0 }}
    // 有目标位置时用指定缩放，否则用世界地图级别
    zoom={targetLocation ? defaultZoom : 2}
    googleMapURL={googleMapURL}
    loadingElement={loadingElement}
    containerElement={containerElement}
    mapElement={mapElement}
  />
);

• 如果你的项目使用了全局状态管理工具（比如Redux、Zustand），可以把目标位置状态放到全局中，这样不管在哪个组件点击按钮，都能更新状态，地图组件只需要监听全局状态变化即可，适合复杂的页面结构。
• 一定要处理geocoder的异常情况，比如地址不存在、API调用失败等，避免程序崩溃。

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