0

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

我正在使用directions api获取overview_polyline数据并将其合并到一个url中，然后使用google cloud数字签名对其进行签名，然后再传递给Image的源prop（{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@`xNncAhKd`AzSp^| _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签名=XXXXXXXXXX签名=XXXXXXXXXX

4

1 回答 1

0

使用encodeURIComponent()

我在从directions 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`
        )
于 2021-11-15T19:26:59.897 回答