react-google-maps部署后Marker不显示问题排查及本地部署差异咨询

一、排查与解决建议 #

结合你之前遇到的「百分比转小数解决样式异常」的经验，这个问题大概率和生产环境下的数据解析、资源路径或代码优化有关，给你几个具体的排查方向：

• 先验证经纬度数据的有效性
  硬编码Marker能显示，说明组件本身没问题，那映射生成的Marker大概率是经纬度解析出了问题。你可以在生产环境中（比如用浏览器控制台的console.log，或者集成Sentry这类日志工具）打印property.fields.latitude和property.fields.longitude的值，看看是不是：

  • 空值、undefined或者非数字格式（比如线上接口返回的是带空格的字符串，本地测试数据是干净的数字）
  • 有没有可能字段名写错了？比如线上接口返回的是lat/lng而不是latitude/longitude？
    另外可以试试强制兜底，比如parseFloat(property.fields.latitude || 0)，看会不会出现Marker集中在原点，验证是不是数据的问题。

• 排除Icon资源的问题
  本地的Icon路径在生产环境可能失效——比如你用的是本地相对路径的图片，打包后资源路径发生了变化。你可以先把icon={icon}换成Google Maps默认的Marker样式（比如去掉icon属性），看看生产环境能不能显示Marker。如果能显示，那就是Icon的路径问题，需要把Icon改成正确的打包后路径（比如用import导入图片，或者放在public文件夹下用绝对路径）。

• 本地模拟生产环境复现问题
  不用每次都部署到Vercel，你可以在本地执行npm run build（或者yarn build），然后用serve这类工具启动build后的静态文件，模拟生产环境的代码状态。如果本地build后也能复现问题，那排查起来就方便多了——可以直接在本地调试压缩后的代码，看是不是变量被混淆、逻辑被tree-shaking掉了。

• 检查Google Maps API的生产环境配置
  确认Vercel上的环境变量里，Google Maps API密钥是不是正确配置，有没有开启生产环境的域名白名单？另外看浏览器控制台的Network面板，检查maps.googleapis.com的请求有没有成功，有没有403/404之类的报错——API密钥无效或者配额不足也可能导致Marker不渲染。

• 验证数组数据的完整性
  看看生产环境下propertyLocalTest数组是不是为空，或者数据长度和本地不一致？比如本地用的是mock数据，线上接口返回的数据少了某些字段，或者接口请求失败导致数组是空的。你可以在渲染Marker前打印数组的长度和内容，确认数据是正常的。

二、部署后React应用与本地运行的核心差异 #

你之前遇到的透明度问题，本质就是生产环境和本地环境的差异导致的，这里整理几个最常见的差异点：

• 环境变量与配置
  本地的.env文件里的变量（比如API密钥、后端接口地址）和Vercel上配置的生产环境变量可能不一致，很容易导致数据获取异常或者服务调用失败。

• 代码编译与优化
  生产环境会做代码压缩（minify）、Tree-Shaking、死代码消除等优化，有时候会把一些看似“无用”的代码去掉，或者混淆变量名——如果你的代码里有依赖未声明的变量，或者逻辑依赖变量名，就可能出问题。

• 静态资源处理
  本地开发时，静态资源（比如图片、Icon）的路径是相对的，webpack会自动处理；但生产环境打包后，资源会被哈希命名，路径也会变化，如果你的Icon路径是硬编码的相对路径，就可能找不到资源。

• 数据来源与接口差异
  本地可能用的是Mock数据或者本地后端，而生产环境用的是线上接口——线上接口的数据结构、字段类型、返回值可能和本地测试数据不一样，比如本地的经纬度是数字，线上返回的是带引号的字符串，或者存在空值。

• 浏览器缓存
  部署后，浏览器可能会缓存旧的JS/CSS文件，导致新的代码没有生效。你可以尝试强制刷新页面（Ctrl+F5），或者在Vercel上配置缓存策略，避免旧代码干扰。

• 跨域与权限
  本地开发时，React的devServer会自动代理跨域请求；但生产环境中，后端的CORS配置如果不正确，会导致接口请求失败，进而没有数据渲染Marker。

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