英文:
Display Google Static maps API response in React
问题
目前正在尝试使用Google的静态地图API从折线生成图像。该折线来自Strava的API。
这可以通过以下代码完成：
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',
})
此API调用以200状态响应，返回一个图像，我不知道如何显示。我可以从网络选项卡中看到它是一张图像。
示例响应：
来自网络选项卡的图像：
到目前为止，我已经尝试将响应中的数据放入图像的src标签中，正如API文档建议的那样。
下面的图像显示了数据嵌入到HTML中，应该在白色框的位置显示：
英文:
Currently trying to use googles statics maps api to generate an image from a polyline. The polyline is from Strava's API's.
This can be done with the following code:
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',
})
This api call is responding with a 200 status an image that I have no idea how to display. I can see its an image from the network tab
example response:
Image from network tab:
So far, I have tried to take the data from the response and put it inside of a src tag on an image, as the api docs suggest.
The image below shows that the data is baked into the html, it should be displaying where the white box is:
答案1
得分: 0
以下是您提供的内容的中文翻译：
您在<img/>标签的src中使用request而不是response
官方文档明确指出：
>“Maps Static API 图像嵌入在<img>标签的src属性中，或者在其他编程语言中的等效方式。”
话虽如此，由于您在使用React，我们可以这样做。
要重现您期望的输出，您可以在组件内部声明一个变量，用于存储路径、API密钥和静态地图请求，如下所示：
const path =
"weight:3%7Ccolor:red%7Cenc:_fisIp~u%7CU}%7Ca@pytA_~b@hhCyhS~hResU%7C%7Cx@oig@rwg@amUfbjA}f[roaAynd@%7CvXxiAt{ZwdUfbjAewYrqGchH~vXkqnAria@c_o@inc@k{g@i`]o%7CF}vXaj\\h`]ovs@?yi_@rcAgtO%7Cj_AyaJren@nzQrst@zuYh`]v%7CGbldEuzd@%7C%7Cx@spD%7CtrAzwP%7Cd_@yiB~vXmlWhdPez\\_{Km_`@~re@ew^rcAeu_@zhyByjPrst@ttGren@aeNhoFemKrvdAuvVidPwbVr~j@or@f_z@ftHr{ZlwBrvdAmtHrmT{rOt{Zz}E%7Cc%7C@o%7CLpn~AgfRpxqBfoVz_iAocAhrVjr@rh~@jzKhjp@``NrfQpcHrb^k%7CDh_z@nwB%7Ckb@a{R%7Cyh@uyZ%7CllByuZpzw@wbd@rh~@%7C%7CFhqs@teTztrAupHhyY%7D]huf@e%7CFria@o}GfezAkdW%7C}[ocMt_Neq@ren@e~Ika@pgE%7Ci%7CAfiQ%7C`l@uoJrvdAgq@fppAsjGhg`@%7ChQpg{Ai_V%7C%7Cx@mkHhyYsdP%7CxeA~gF%7C}[mv`@t_NitSfjp@c}Mhg`@sbChyYq}e@rwg@atFff}@ghN~zKybk@fl}A}cPftcAite@tmT__Lha@u~DrfQi}MhkSqyWivIumCria@ciO_tHifm@fl}A{rc@fbjAqvg@rrqAcjCf%7Ci@mqJtb^s%7C@fbjA{wDfs`BmvEfqs@umWt_Nwn^pen@qiBr`xAcvMr{Zidg@dtjDkbM%7Cd_@";
const APIKey = "YOUR_API_KEY";
const staticMapsUrl =
"https://maps.googleapis.com/maps/api/staticmap" +
"?size=400x400¢er=59.900503,-135.478011&zoom=4" +
`&path=${path}` +
`&key=${APIKey}`;
请注意，这只是我为了更好的可读性而采用的方法。在您的情况下，只要填写请求所需的参数，您可以以任何方式完成这个任务。
然后，您的return应该类似于这样：
return (
<div>
<p>React中的静态地图</p>
<img src={staticMapsUrl} alt="map" />
</div>
);
有了这一切，输出应该像这样：
以下是组件的完整代码：
import React from "react";
export default function Map() {
const path =
"weight:3%7Ccolor:red%7Cenc:_fisIp~u%7CU}%7Ca@pytA_~b@hhCyhS~hResU%7C%7Cx@oig@rwg@amUfbjA}f[roaAynd@%7CvXxiAt{ZwdUfbjAewYrqGchH~vXkqnAria@c_o@inc@k{g@i`]o%7CF}vXaj\\h`]ovs@?yi_@rcAgtO%7Cj_AyaJren@nzQrst@zuYh`]v%7CGbldEuzd@%7C%7Cx@spD%7CtrAzwP%7Cd_@yiB~vXmlWhdPez\\_{Km_`@~re@ew^rcAeu_@zhyByjPrst@ttGren@aeNhoFemKrvdAuvVidPwbVr~j@or@f_z@ftHr{ZlwBrvdAmtHrmT{rOt{Zz}E%7Cc%7C@o%7CLpn~AgfRpxqBfoVz_iAocAhrVjr@rh~@jzKhjp@``NrfQpcHrb^k%7CDh_z@nwB%7Ckb@a{R%7Cyh@uyZ%7CllByuZpzw@wbd@rh~@%7C%7CFhqs@teTztrAupHhyY}t]huf@e%7CFria@o}GfezAkdW%7C}[ocMt_Neq@ren@e~Ika@pgE%7Ci%7CAfiQ%7C`l@uoJrvdAgq@fppAsjGhg`@%7ChQpg{Ai_V%7C%7Cx@mkHhyYsdP%7CxeA~gF%7C}[mv`@t_NitSfjp@c}Mhg`@sbChyYq}e@rwg@atFff}@ghN~zKybk@fl}A}cPftcAite@tmT__Lha@u~DrfQi}
<details>
<summary>英文:</summary>
## You use the `request` in the `src` of an `<img />` tag instead of the `response` ##
The official documentation specifically says that:
>_"A Maps Static API image is embedded within an `<img>` tag's `src` attribute, or its equivalent in other programming languages."_
With that said, since you are using React, we can do it this way.
To reproduce your expected output, you can declare a variable for your path, API key, and Static Maps Request inside your component like so:
const path =
"weight:3%7Ccolor:red%7Cenc:_fisIp~u%7CU}%7Ca@pytA_~b@hhCyhS~hResU%7C%7Cx@oig@rwg@amUfbjA}f[roaAynd@%7CvXxiAt{ZwdUfbjAewYrqGchH~vXkqnAria@c_o@inc@k{g@i`]o%7CF}vXaj\\h`]ovs@?yi_@rcAgtO%7Cj_AyaJren@nzQrst@zuYh`]v%7CGbldEuzd@%7C%7Cx@spD%7CtrAzwP%7Cd_@yiB~vXmlWhdPez\\_{Km_`@~re@ew^rcAeu_@zhyByjPrst@ttGren@aeNhoFemKrvdAuvVidPwbVr~j@or@f_z@ftHr{ZlwBrvdAmtHrmT{rOt{Zz}E%7Cc%7C@o%7CLpn~AgfRpxqBfoVz_iAocAhrVjr@rh~@jzKhjp@``NrfQpcHrb^k%7CDh_z@nwB%7Ckb@a{R%7Cyh@uyZ%7CllByuZpzw@wbd@rh~@%7C%7CFhqs@teTztrAupHhyY}t]huf@e%7CFria@o}GfezAkdW%7C}[ocMt_Neq@ren@e~Ika@pgE%7Ci%7CAfiQ%7C`l@uoJrvdAgq@fppAsjGhg`@%7ChQpg{Ai_V%7C%7Cx@mkHhyYsdP%7CxeA~gF%7C}[mv`@t_NitSfjp@c}Mhg`@sbChyYq}e@rwg@atFff}@ghN~zKybk@fl}A}cPftcAite@tmT__Lha@u~DrfQi}MhkSqyWivIumCria@ciO_tHifm@fl}A{rc@fbjAqvg@rrqAcjCf%7Ci@mqJtb^s%7C@fbjA{wDfs`BmvEfqs@umWt_Nwn^pen@qiBr`xAcvMr{Zidg@dtjDkbM%7Cd_@";
const APIKey = "YOUR_API_KEY";
const staticMapsUrl =
"https://maps.googleapis.com/maps/api/staticmap" +
"?size=400x400&center=59.900503,-135.478011&zoom=4" +
`&path=${path}` +
`&key=${APIKey}`;
Please do note that this is just my way of doing this thing for better readability. So in your case, you can do whatever way you want here as long as your filling up the required parameters for the request to be successful.
Then your `return` should look something like this:
return (
<div>
<p>Static Map In React</p>
<img src={staticMapsUrl} alt="map" />
</div>
);
And with all that, the output should be like this:
[![sample output][1]][1]
Here's the full code of the component:
import React from "react";
export default function Map() {
const path =
"weight:3%7Ccolor:red%7Cenc:_fisIp~u%7CU}%7Ca@pytA_~b@hhCyhS~hResU%7C%7Cx@oig@rwg@amUfbjA}f[roaAynd@%7CvXxiAt{ZwdUfbjAewYrqGchH~vXkqnAria@c_o@inc@k{g@i`]o%7CF}vXaj\\h`]ovs@?yi_@rcAgtO%7Cj_AyaJren@nzQrst@zuYh`]v%7CGbldEuzd@%7C%7Cx@spD%7CtrAzwP%7Cd_@yiB~vXmlWhdPez\\_{Km_`@~re@ew^rcAeu_@zhyByjPrst@ttGren@aeNhoFemKrvdAuvVidPwbVr~j@or@f_z@ftHr{ZlwBrvdAmtHrmT{rOt{Zz}E%7Cc%7C@o%7CLpn~AgfRpxqBfoVz_iAocAhrVjr@rh~@jzKhjp@``NrfQpcHrb^k%7CDh_z@nwB%7Ckb@a{R%7Cyh@uyZ%7CllByuZpzw@wbd@rh~@%7C%7CFhqs@teTztrAupHhyY}t]huf@e%7CFria@o}GfezAkdW%7C}[ocMt_Neq@ren@e~Ika@pgE%7Ci%7CAfiQ%7C`l@uoJrvdAgq@fppAsjGhg`@%7ChQpg{Ai_V%7C%7Cx@mkHhyYsdP%7CxeA~gF%7C}[mv`@t_NitSfjp@c}Mhg`@sbChyYq}e@rwg@atFff}@ghN~zKybk@fl}A}cPftcAite@tmT__Lha@u~DrfQi}MhkSqyWivIumCria@ciO_tHifm@fl}A{rc@fbjAqvg@rrqAcjCf%7Ci@mqJtb^s%7C@fbjA{wDfs`BmvEfqs@umWt_Nwn^pen@qiBr`xAcvMr{Zidg@dtjDkbM%7Cd_@";
const APIKey = "YOUR_API_KEY";
const staticMapsUrl =
"https://maps.googleapis.com/maps/api/staticmap" +
"?size=400x400&center=59.900503,-135.478011&zoom=4" +
`&path=${path}` +
`&key=${APIKey}`;
return (
<div>
<p>Static Map In React</p>
<img src={staticMapsUrl} alt="map" />
</div>
);
}
Here's also a proof of concept sandbox that you can check and play around with: https://codesandbox.io/s/static-maps-in-react-6k6hmp?file=/src/Map.js
I hope this helps!
[1]: https://i.stack.imgur.com/z5eYW.png
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论