React中Google Map组件无法正确居中问题求助

我看了你的代码，问题的核心是你把对象格式的坐标当成数组来访问了，导致传递给Google Maps的坐标完全无效，所以地图才会默认定位到海洋区域。下面是具体的错误分析和修复方案：

错误点拆解 #

你的latLgn状态里每个元素都是包含lat和lng属性的对象：

{ lng: 24.7536, lat: 59.437 }

但你在两处关键代码里都用了数组下标访问（item[1]、pin[1]），这会拿到undefined，Google Maps接收到无效坐标后就会跳转到默认的海洋区域。

修复步骤 #

1. 修正标记点的坐标绑定 #

在渲染地图标记时，把数组下标访问改成对象属性访问：

// 错误写法
<div lat={item[1]} lng={item[0]} key={index}></div>

// 正确写法
<div lat={item.lat} lng={item.lng} key={index}></div>

2. 修正getMapBounds函数的坐标处理 #

计算地图边界时，同样要使用对象的lat和lng属性：

// 错误写法
bounds.extend(new maps.LatLng(pin[1], pin[0]));

// 正确写法
bounds.extend(new maps.LatLng(pin.lat, pin.lng));

3. 可选优化：简化参数传递 #

我还帮你简化了apiIsLoaded的参数传递，直接在函数内部访问latLgn状态即可，不用额外传参，让代码更简洁。

修复后的完整代码 #

import React, { useState } from "react";
import GoogleMapReact from "google-map-react";

export default function GMap() {
  const [latLgn, setLatLgn] = useState([
    { lng: 24.7536, lat: 59.437 },
    { lng: 24.7303, lat: 59.4393 },
    { lng: 24.7387, lat: 59.4497 },
  ]);
  const [tallinn] = useState({
    center: { 
      // 期望的地图中心位置
      lng: 24.7536,
      lat: 59.437,
    },
    zoom: 10,
  });

  // API加载完成后适配地图边界
  const apiIsLoaded = (map, maps) => {
    // 根据标记点获取边界
    const bounds = getMapBounds(maps, latLgn);
    // 适配地图到边界范围
    map.fitBounds(bounds);
    // 绑定窗口大小调整监听
    bindResizeListener(map, maps, bounds);
  };

  // 窗口大小调整时重新居中地图
  const bindResizeListener = (map, maps, bounds) => {
    maps.event.addDomListenerOnce(map, "idle", () => {
      maps.event.addDomListener(window, "resize", () => {
        map.fitBounds(bounds);
      });
    });
  };

  // 根据标记点列表返回地图边界
  const getMapBounds = (maps, pins) => {
    const bounds = new maps.LatLngBounds();
    pins.forEach((pin) => {
      bounds.extend(new maps.LatLng(pin.lat, pin.lng));
    });
    return bounds;
  };

  return (
    <div>
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"}}
          defaultCenter={tallinn.center}
          defaultZoom={tallinn.zoom}
          onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)}
          yesIWantToUseGoogleMapApiInternals
        >
          {latLgn.map((item, index) => (
            <div 
              lat={item.lat} 
              lng={item.lng} 
              key={index}
              style={{width: 12, height: 12, backgroundColor: 'red', borderRadius: '50%'}}
            ></div>
          ))}
        </GoogleMapReact>
      </div>
    </div>
  );
}

额外调试提示 #

我给标记点加了红色圆点样式，这样你能直观看到标记是否正确出现在地图上；如果还是有问题，可以在getMapBounds里打印bounds的值，确认边界计算是否符合预期。

内容的提问来源于stack exchange，提问作者Kim-Jun-Un