带有折线的 Google Map Static Api 未在 React Native 上显示答案

【问题标题】：Google Map Static Api with polyline not displaying on React Native带有折线的 Google Map Static Api 未在 React Native 上显示
【发布时间】：2021-11-14 13:13:42
【问题描述】：

我正在尝试使用 React Native 中的 Google Maps Static API 添加地图图像。

我正在使用方向 api 获取 overview_polyline 数据并将其合并到一个 URL 中，然后使用谷歌云数字签名对其进行签名，然后再传递到 Image 的源属性 ({ uri: (my url)}) .

图像未呈现在屏幕上，没有错误消息。

我尝试在 trycatch 语句中使用 fetch()，得到的响应是：

Google Maps Platform 服务器拒绝了您的请求。无法验证请求。提供的“签名”对于提供的 API 密钥无效，或者提供的“密钥”无效。已根据以下 URL 检查签名：/maps/api/staticmap?&size=400x400&path=weight:3%257Ccolor:0x0352A0CC%257Cenc:(polyline)&key&mapID&signature。

但是，当我在 safari 和 chrome 中使用完全相同的 url（具有相同的 API 密钥和签名）时，它会呈现图像。

我试过了：

两者都更改了 url，因此它不再在浏览器中工作。

以下是我正在使用的网址示例： https://maps.googleapis.com/maps/api/staticmap?&size=400x400&path=weight:3%7Ccolor:0x0352A0CC%7Cenc:s~xdIxe~GyBh]mFpG{AqGs@qFmKgVoVaNjPkcAzJ{sBzc@qqA|XaxAwFc_A{Ywm@u[mOgYgc@}UiuAgVgtBsDaMkG`D_BaZpCadFfKmxBxXgn@hq@m\\nb@pCta@vNncAhKd`AzSp|@xUpk@yVvt@q^`_AzAlw@pT`l@r`@rfDdjAtn@b[jj@jcAl[pg@tj@ne@nn@jIxbAkB~wAaq@zl@aLnf@Rnc@dI~m@aBnwCzFj}A~a@j}@|B~h@eIxp@hS|`@xHl[_Grr@_d@rWgXfOme@ti@e_Apz@y}@~aA}hBpyAmuBjf@wUjZeAbdAci@peAuWrn@yKxl@ii@tYaYr]qIl^jDp\fRti@daAt`@ve@n[bMjo@dx@dz@ldAts@`[`]tRlTf]tf@reAll@tMhnAiBfd@nB~a@}Irg@pExn@vk@bp@|VpcAyZrkAcg@|~@yWzs@pCxdCz{@vr@_HnmA}gAnqAydApt@a^z_AaQ|}@`BdlA`_@x`@lMze@Jlc@zDtZ`Pbq@bb@~qAtEv|A{Tdm@eW`h@us@hkA_}Dhm@ywA`fAipAjyC{qBleA_b@xx@bBl_AxO|}@e]~cAkk@f]gFzx@l@zcAee@pdAiVtbA`_@fo@xc@pc@|Qp~@|LxtBzBhhA`Cx`@uHfh@bC~j@bHtcAaGvaA_b@xvAq_A~uAo_@xiA_f@|pCc|@taAcNdsAqj@hsBiwBvoEg_Ene@sRnj@uI|f@mi@|g@e_AzlAkaDtl@}_CniAggIrhAqgEje@mtBzz@oaBfdCgiFfx@ktAju@}{@z}@gy@ty@cy@hf@yy@vg@m~@hi@mbAfjAq|Ctn@glAjdAw`Azv@k}AxfByvEn|AccG`r@utBdVkxA`j@ylD`_A_gFzb@yz@ju@cs@zaBwrAnm@qTf|@{H`s@ig@xe@{x@ng@_m@zw@gYvaAuMz{@uj@teAot@hs@qu@js@uPfa@}x@boAmoB|kBalBfyBwVj{Gqs@n{@vEnhAdTz_@tGh`@eDje@_c@bl@ybAlo@wi@pj@qN|{Cq~@h^cUbb@}Er{@nE~}@kd@b}@}tB`d@uk@ti@}OrXcgAph@c`BrVu~A_P{uBnA_u@f]so@z|@aa@xcAqbAnu@gt@po@qSb|@rPvZN~ZoMfO}U~Eya@gNug@sHkGtCwQzt@ax@db@aRbM}_@`QkTjc@weAje@mo@dIqHvFeEn@pGdMfDrO|AbHoDbHT|XlEjVab@~c@{l@xXcTnOsJvq@am@`LaFlDgu@{AiN}Z{`A]mCHf@&key=XXXXXXXX&map_id=XXXXXXXXXXXea10&signature=XXXXXXXXXX

【问题讨论】：

您如何签署您的请求？你关注这些steps了吗？我使用了您正在使用的地图静态 URL，并使用这些步骤签署了我的请求，我可以在 react-native 中正确地看到地图（我只是在这里使用示例代码：reactnative.dev/docs/image#examples）。但是当我故意删除我的 uri 中的某些字符使请求无效并在浏览器中运行无效请求时，我遇到了图像没有呈现且没有错误消息的问题。
@pagemag 我使用该链接中提供的 node.js 代码签署了请求。结果证明签名很好，这与未编码 uri 的折线有关。

标签： javascript react-native google-maps google-maps-api-3 google-static-maps

【解决方案1】：

使用 encodeURIComponent()

我在从方向 api 返回的overview_polyline 值上使用了此函数，以将折线转换为 uri 兼容。

const encodeParseRes = encodeURIComponent(parseRes.route)

        return (
            `https://maps.googleapis.com/maps/api/staticmap?&size=500x500&path=weight:6%7Ccolor:0x0352A0CC%7Cenc:${encodeParseRes}&key=XXXXXXXXXX&map_id=XXXXXXXXXX`
        )

【讨论】：