在React中展示Google Static Maps API响应的问题

云上老周

2026-7-19

解决React中无法展示Google静态地图图片的问题

问题根源

axios默认会将响应数据解析为JSON格式，但Google Static Maps返回的是二进制图片数据，直接使用会导致数据格式错误，无法被img标签识别。另外你原请求URL末尾多了一个多余的}，会导致请求参数无效，需要先删除。

修复步骤

修正axios请求配置，指定responseType为'blob'以正确接收二进制数据，同时修正URL错误：

const response = await axios(`https://maps.googleapis.com/maps/api/staticmap?path=enc:${props.obj.map.summary_polyline}&size=400x400&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY}`, {
  method: 'GET',
  responseType: 'blob' // 关键配置，确保接收二进制数据
})

将Blob数据转换为img可识别的URL：
推荐使用URL.createObjectURL()生成临时URL（性能更优）：

// 获取临时URL
const mapImageUrl = URL.createObjectURL(response.data);
// 在组件中使用img标签
// <img src={mapImageUrl} alt="运动轨迹地图" />

清理临时URL避免内存泄漏：
在组件卸载时释放生成的Object URL，可配合useEffect实现：

import { useEffect, useState } from 'react';

function ActivityMap({ obj }) {
  const [mapUrl, setMapUrl] = useState('');

  useEffect(() => {
    let tempUrl;
    const fetchMap = async () => {
      const response = await axios(`https://maps.googleapis.com/maps/api/staticmap?path=enc:${obj.map.summary_polyline}&size=400x400&key=${import.meta.env.VITE_GOOGLE_MAPS_API_KEY}`, {
        method: 'GET',
        responseType: 'blob'
      });
      tempUrl = URL.createObjectURL(response.data);
      setMapUrl(tempUrl);
    };
    fetchMap();

    // 组件卸载时清理
    return () => {
      if (tempUrl) URL.revokeObjectURL(tempUrl);
    };
  }, [obj.map.summary_polyline]);

  return <img src={mapUrl} alt="运动轨迹地图" />;
}