React中GoogleMapReact地图不显示及标记加载失败问题求助

核心问题分析与修复点： #

• 错误使用非状态变量存储API数据：你用普通数组items存储API返回结果，React不会监听普通变量的变化，且组件每次渲染时items都会被重置为空数组，导致地图渲染时无可用数据，也无法触发重渲染更新视图。必须用useState声明items状态。
• 无用的测试库导入：import { render } from "@testing-library/react";属于测试工具，和组件功能无关，直接删除。
• 标记点数据源错误：API返回的巴士数据存在buses状态里，但你却遍历items数组，应改为遍历buses。
• 标记点图片链接无效：你用的是网页链接而非图片资源，需替换为实际的图片URL（比如本地图片路径或公开的图片CDN地址）。
• 地图缺少必填缩放属性：GoogleMapReact需要设置defaultZoom，否则地图无法正常加载显示。

修复后的完整代码： #

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

const markerStyle = {
  position: "absolute",
  top: "100%",
  left: "50%",
  transform: "translate(-50%, -100%)",
  width: 30,
  height: 30
};

function SimpleMap() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]); // 改为状态变量
  const [buses, setBuses] = useState([]);

  useEffect(() => {
    fetch("https://www.example.com/api/ajax/apiNew")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result); // 使用状态更新函数修改数据
          setBuses(result["bus"]); // 直接从返回结果中提取bus数组
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{
            key: "My_API_KEY" // 替换为你的真实Google Maps API密钥
          }}
          defaultCenter={{
            lat: 60.192059,
            lng: 24.945831
          }}
          defaultZoom={12} // 添加默认缩放级别
        >
          {
            buses.map(bus => ( // 遍历buses数组渲染标记点
              <div 
                key={bus['@attr'].id} 
                lat={parseFloat(bus['@attr'].lat)} // 确保坐标为数字类型
                lng={parseFloat(bus['@attr'].long)}
              >
                {/* 替换为实际的图片URL */}
                <img style={markerStyle} src="/path/to/your/pin-icon.png" alt="bus pin" />
              </div>
            ))
          }
        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;

额外注意事项： #

• 确保你的Google Maps API密钥已启用Maps JavaScript API，且无错误的权限限制。
• 坐标属性lat和lng需为数字类型，若API返回字符串，需用parseFloat转换。
• 标记点图片要使用正确的资源路径，避免跨域问题。

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