Google Maps图标定位异常：平移/缩放时位置偏移求助

你的标记在地图平移/缩放时错位的核心原因是缺少有效的Google Maps API密钥，其次是地图状态未做受控处理。

核心问题：Google Maps API密钥缺失 #

你在Map.js中bootstrapURLKeys={{ key: '' }}传入了空密钥，这会导致Google Maps JavaScript API无法加载完整功能——无授权的地图实例会出现坐标同步异常、交互功能受限等问题，直接表现为标记位置随地图交互偏移。

NASA的EONET API是公开接口，无需权限，所以问题和NASA API无关。

修复步骤 #

1. 获取并配置Google Maps API密钥 #

• 前往Google Cloud控制台，启用Maps JavaScript API，生成API密钥（注意设置合理的使用限制避免额外费用）。
• 将密钥填入Map.js的bootstrapURLKeys中：

bootstrapURLKeys={{ key: '你的Google Maps API密钥' }}

2. 改为受控地图组件（可选但推荐） #

使用defaultCenter和defaultZoom仅能设置初始状态，无法跟踪用户交互后的地图位置。改为受控组件可确保标记始终和地图坐标同步：

修改Map.js：

import GoogleMapReact from "google-map-react";
import LocationMarker from "./LocationMarker";
import { useState } from "react";

const Map = ({ eventData }) => {
  // 用state跟踪当前地图中心和缩放级别
  const [center, setCenter] = useState({ lat: -37.6343, lng: 145.0605 });
  const [zoom, setZoom] = useState(4);

  // 监听地图变化，更新state
  const handleMapUpdate = ({ center, zoom }) => {
    setCenter(center);
    setZoom(zoom);
  };

  const markers = eventData.map((ev, index) => {
    if(ev.categories[0].id === 8){
      return <LocationMarker key={index} lat={ev.geometries[0].coordinates[1]} lng={ev.geometries[0].coordinates[0]} />
    }
    return null;
  })

  return (
    <div className="map">
      <GoogleMapReact
        bootstrapURLKeys={{ key: '你的Google Maps API密钥' }}
        center={center}
        zoom={zoom}
        onChange={handleMapUpdate}
      >
        {markers}
      </GoogleMapReact>
    </div>
  );
};

export default Map;

3. 修复App.js的缺失导入 #

你的App.js中使用了useState和useEffect但未导入，补充导入：

import Map from "./components/Map";
import Loader from "./components/Loader";
import React, { useState, useEffect } from "react";

验证 #

完成上述修改后，重新启动应用：标记初始位置正确，平移/缩放地图时，标记会保持在对应的经纬度位置，不再偏移。

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