React Native中带polyline的Google Maps Static API图片无法渲染问题

核心问题定位 #

报错日志里的校验URL出现%257C字符，代表参数被二次编码：你生成签名时使用的URL里，|分隔符被编码为%7C，React Native的Image组件/fetch方法发起请求时，会自动对URI中的特殊字符做二次转义，将%7C中的%再次编码为%25，最终变为%257C，和生成签名时的原始URL不一致，导致签名校验失败。浏览器不会执行额外的二次编码，因此直接粘贴URL可正常访问。

解决方案 #

• 生成签名时使用未做任何URL编码的原始参数字符串，path参数直接填写weight:3|color:0x0352A0CC|enc:你的polyline内容，不要手动将|转义为%7C。
• 生成签名后，构造传给Image组件的URI时，不要手动编码任意参数，直接用encodeURI()包裹完整URL即可，禁止使用encodeURIComponent()处理整个URL，示例代码如下：

// 拼接未编码的原始URL
const rawUrl = `https://maps.googleapis.com/maps/api/staticmap?size=400x400&path=weight:3|color:0x0352A0CC|enc:${polylineStr}&key=${你的API_KEY}&map_id=${你的MAP_ID}&signature=${生成的签名}`
// 仅做一次全局编码，避免二次转义
const requestUri = encodeURI(rawUrl)
// 传入Image组件
<Image source={{ uri: requestUri }} style={{ width: 400, height: 400 }} />

• 若仍校验失败，可先将你之前手动编码的URL用decodeURIComponent()完全解码，再执行上述encodeURI()全局编码步骤，彻底清除提前编码的影响。

验证方式 #

• 打印decodeURI(requestUri)，和浏览器中可正常打开的URL做对比，两者完全一致即可保证签名校验通过。
• 可通过抓包工具抓取RN实际发起的请求URL，确认没有出现%257C这类二次编码的异常字符。

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