静态地图和折线的 Mapbox API 请求

问题描述

我正在改写我之前提出的一个问题，希望它能给我一些反馈。

我需要从 Mapbox 生成一个静态地图，显示两个端点和它们之间的折线路线。下面概述的方法是我正在使用的方法。它有时有效，有时无效——这就是让我发疯的原因。

首先，我使用两个 GPS 端点发出生成折线的 API 请求。然后我使用带有两个端点和折线的第二个 API 请求来生成静态地图。第一部分似乎总是有效。我得到了一条编码折线，我可以通过在线解码工具运行它，它可以很好地显示路径上的各个点，但是从 Mapbox 生成地图的第二步有时会给我预期的地图，有时会给我一个错误代码。代码通常是 {"message":"Not Found"}，但有时我会收到一个 {"message":"Not Authorized - No Token"} 错误代码。

我将此 API 与两个端点一起使用以获取具有折线的 JSON 文件： https://api.mapbox.com/directions/v5/mapbox/driving/POINT1;POINT2?access_token=TOKEN

然后，一旦我有了折线，我就会使用这个 API 来生成地图：

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(POINT1),path-5+f44-0.5(POLYLINE)/auto/500x300?access_token=TOKEN

这很好用...

点 1 = -87.321536,36.584454

点 2 = -104.793676,38.749513

折线 = }kh~Ez{}sO|HUuHmj@uhHbOyAla@kisAdelC|aMf~w@egO|uaAahfBr{|@w_@sAozkCcwFsp@v]__w@hjFjf@bdCkaJhmzAiyXtzb@fJ|{@{p[|~yErtBdacE{x^vkvHrZfuKo[tpBfxSrcuBocGpi_AqhCvjb@wgAvfsDhyc@fkrD~mD~bkDayD~ywCsui@vjmEoyBpk|AiOhHrvEdueApda@huoA|v[zuhFsySvwaAvbDwqHxXpwDYj@riJULheEfjXh {1}}hAkEY~@kHseBlGyC^kA

地图 API 请求 = https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(-87.321536,path-5+f44-0.5(}kh~Ez{}sO|HUuHmj@uhHbOyAla@kisAdelC|aMf~w@egO|uaAahfBr{|@w_@sAozkCcwFsp@v]__w@`hjFjf@bdCkaJhmzAiyXtzb@fJ|{@{p[|~yErtBdacE{x^vkvHrZfuKo[tpBfxSrcuBocGpi_AqhCvjb@wgAvfsDhyc@fkrD~mD~bkDayD~ywCsui@vjmEoyBpk|AiOhHrvEdueApda@huoA|v[zuhFsySvwaAvbD`wqHxXpwDYj@riJULheEfXh^tdAj~I`^gI`hAkEY~@kHseBlGyC^kA)/auto/500x300?access_token=TOKEN

地图（耶！）

这不起作用...

点 1 = -87.321536,36.584454

点 2 = -85.855218,37.690038

折线 = }kh~Ez{}sO|HUtCurC}xCkhC}~BqvIuc_@o~l@oaI}aUrs@kkL}~Iso\qHoyGsiKa^gIOclZkdCw]mgEwyDogLgfBatEubCmkGxa@icLec{}TwgD [zFyIk~Bts@

地图 API 请求 = https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(-87.321536,path-5+f44-0.5(}kh~Ez{}sO|HUtCurC}xCkhC}~BqvIuc_@o~l@oaI}aUrs@kkL}~Iso\qHoyGsiKa`TpQcRdlGusK_DEiz@w^cwOakJurAizT{hCugF_bBenSs`OclZkdCw]mgEwyDogLgfBatEubCmkGxa@icLe_Do_Spf@cw]}sEgOaDgT{[zFyIk~Bts@)/auto/500x300?access_token=TOKEN

没有地图:-(

这是一个更大项目的一小部分，我正在自动化生成项目报告的过程，但问题不在于我的 jQuery/AJAX 代码。这是我的 API 和/或 Mapbox 的问题。如果有更好/更快/更容易获得这些地图的方法，那么我绝对愿意接受建议，因为这似乎不是最有效的方法。我将从计算机生成这些报告。我不担心带宽或电话应用程序的缩小。只要我每次都能始终如一地生成地图，该文件就可以很麻烦。

解决方法

Steve 的评论暗示了正确的解决方案，但只是为了让它绝对清楚 - 发生这种情况是因为您没有正确编码请求中的路径折线。尤其是折线有一个坏习惯，即包含会破坏 URI 的保留字符，除非在请求时正确编码。

当我使用 url encode decode 之类的简单工具对路径叠加层的折线部分进行编码时，我能够使您的请求有效 as expected：

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(-87.321536,path-5+f44-0.5(%7Dkh~Ez%7B%7DsO%7CHUtCurC%7DxCkhC%7D~BqvIuc_%40o~l%40oaI%7DaUrs%40kkL%7D~Iso%2FqHoyGsiKa%60TpQcRdlGusK_DEiz%40w%5EcwOakJurAizT%7BhCugF_bBenSs%60OclZkdCw%5DmgEwyDogLgfBatEubCmkGxa%40icLe_Do_Spf%40cw%5D%7DsEgOaDgT%7B%5BzFyIk~Bts%40)/auto/500x300?access_token=MAPBOX_ACCESS_TOKEN

---

⚠️ 免责声明：我目前在 Mapbox 工作 ⚠️