google-maps - 如何使用传单显示 "Google API directions"折线？

Question

我想在带有传单的 map 上显示行程。

为此，我在 Google map 路线 API 上提出了一个获取请求。我得到一个这样的json:

{
    "routes" : [
        {
            "bounds" : {
                "northeast" : {
                    "lat" : 51.5103406,
                    "lng" : -0.0627423
                },
                "southwest" : {
                    "lat" : 51.5049264,
                    "lng" : -0.0898856
                }
            },
            "copyrights" : "Données cartographiques ©2014 Google",
            "legs" : [
                {
                    "distance" : {
                        "text" : "3,0 km",
                        "value" : 2959
                    },
                    "duration" : {
                        "text" : "7 minutes",
                        "value" : 427
                    },
                    "end_address" : "29 Fowey Close, Londres E1W 2JP, Royaume-Uni",
                    "end_location" : {
                        "lat" : 51.5064421,
                        "lng" : -0.0627423
                    },
                    "start_address" : "8 Southwark Street, Londres SE1 1TL, Royaume-Uni",
                    "start_location" : {
                        "lat" : 51.5049264,
                        "lng" : -0.0898856
                    },
                    "steps" : [
                        {
                            "distance" : {
                                "text" : "0,6 km",
                                "value" : 601
                            },
                            "duration" : {
                                "text" : "1 minute",
                                "value" : 77
                            },
                            "end_location" : {
                                "lat" : 51.5099409,
                                "lng" : -0.0870841
                            },
                            "html_instructions" : "Prendre la direction \u003cb\u003enord-est\u003c/b\u003e sur \u003cb\u003eBorough High St/A3\u003c/b\u003e vers \u003cb\u003eBedale St\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eContinuer de suivre A3\u003c/div\u003e\u003cdiv style=\"font-size:0.9em\"\u003eEntrée dans une section à péage\u003c/div\u003e",
                            "polyline" : {
                                "points" : "ypjyHxpPCG_@o@QY_AkAE?C?CCQSEGEEMQEEACGGIGeAo@]OA?ECQGGC_@KgHeBqAc@a@Iq@WYG_AUi@OIACAYG"
                            },
                            "start_location" : {
                                "lat" : 51.5049264,
                                "lng" : -0.0898856
                            },
                            "travel_mode" : "DRIVING"
                        },
                        {
                            "distance" : {
                                "text" : "0,2 km",
                                "value" : 152
                            },
                            "duration" : {
                                "text" : "1 minute",
                                "value" : 25
                            },
                            "end_location" : {
                                "lat" : 51.50989,
                                "lng" : -0.0883307
                            },
                            "html_instructions" : "Prendre légèrement \u003cb\u003eà gauche\u003c/b\u003e sur \u003cb\u003eArthur St\u003c/b\u003e",
                            "maneuver" : "turn-slight-left",
                            "polyline" : {
                                "points" : "cpkyHf_PGB_@EK?A?I@GFEHAJAJ?Z?V@NBRBPDVBFDHDLDFFFFFJFXL"
                            },
                            "start_location" : {
                                "lat" : 51.5099409,
                                "lng" : -0.0870841
                            },
                            "travel_mode" : "DRIVING"
                        },
                        {
                            "distance" : {
                                "text" : "0,6 km",
                                "value" : 590
                            },
                            "duration" : {
                                "text" : "1 minute",
                                "value" : 72
                            },
                            "end_location" : {
                                "lat" : 51.50955829999999,
                                "lng" : -0.080139
                            },
                            "html_instructions" : "Prendre \u003cb\u003eà gauche\u003c/b\u003e sur \u003cb\u003eUpper Thames St/A3211\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eContinuer de suivre A3211\u003c/div\u003e",
                            "maneuver" : "turn-left",
                            "polyline" : {
                                "points" : "yokyH`gPZ}DFu@Dg@H}@Bk@P_CRsDJuAJiB\\qE@QF_ABiA?i@CUCc@Ce@CWCMAIG_@Ke@Oa@ACQi@Qm@"
                            },
                            "start_location" : {
                                "lat" : 51.50989,
                                "lng" : -0.0883307
                            },
                            "travel_mode" : "DRIVING"
                        },
                        {
                            "distance" : {
                                "text" : "0,5 km",
                                "value" : 498
                            },
                            "duration" : {
                                "text" : "1 minute",
                                "value" : 73
                            },
                            "end_location" : {
                                "lat" : 51.5093097,
                                "lng" : -0.0737046
                            },
                            "html_instructions" : "Continuer sur \u003cb\u003eByward St/A100\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eContinuer de suivre A100\u003c/div\u003e\u003cdiv style=\"font-size:0.9em\"\u003eSortie de section à péage dans 400 m, au niveau de Minories/A1211\u003c/div\u003e",
                            "polyline" : {
                                "points" : "wmkyHzsNG[CWCUAS?E?c@?I?M@u@@I@_AFs@Jo@DYBM?G?C?C?K?QAs@A]AaACe@Ae@AQM{ASqAIc@CMa@{BEW?I?K?IBK@GHSHOHOJMHKLMRQVOPU"
                            },
                            "start_location" : {
                                "lat" : 51.50955829999999,
                                "lng" : -0.080139
                            },
                            "travel_mode" : "DRIVING"
                        },
                        {
                            "distance" : {
                                "text" : "0,5 km",
                                "value" : 472
                            },
                            "duration" : {
                                "text" : "1 minute",
                                "value" : 54
                            },
                            "end_location" : {
                                "lat" : 51.5090739,
                                "lng" : -0.06770899999999999
                            },
                            "html_instructions" : "Continuer sur \u003cb\u003eMinories/A1203\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eContinuer de suivre A1203\u003c/div\u003e",
                            "polyline" : {
                                "points" : "elkyHrkMXc@XYHAJORg@VgAT}@Ry@Nq@FWDOD]B]?W?WASAWM_B]gDEe@Gi@i@uCo@uC"
                            },
                            "start_location" : {
                                "lat" : 51.5093097,
                                "lng" : -0.0737046
                            },
                            "travel_mode" : "DRIVING"
                        },
                        {
                            "distance" : {
                                "text" : "0,3 km",
                                "value" : 297
                            },
                            "duration" : {
                                "text" : "1 minute",
                                "value" : 57
                            },
                            "end_location" : {
                                "lat" : 51.5065805,
                                "lng" : -0.0666981
                            },
                            "html_instructions" : "Prendre \u003cb\u003eà droite\u003c/b\u003e sur \u003cb\u003eVaughan Way\u003c/b\u003e",
                            "maneuver" : "turn-right",
                            "polyline" : {
                                "points" : "ujkyHdfL`Ak@VQZYZ_@JSJOJMFGJGJG@ALCHCPC~@?n@AL?`@?p@?\\F"
                            },
                            "start_location" : {
                                "lat" : 51.5090739,
                                "lng" : -0.06770899999999999
                            },
                            "travel_mode" : "DRIVING"
                        },
                        {
                            "distance" : {
                                "text" : "0,3 km",
                                "value" : 272
                            },
                            "duration" : {
                                "text" : "1 minute",
                                "value" : 41
                            },
                            "end_location" : {
                                "lat" : 51.5068938,
                                "lng" : -0.0629257
                            },
                            "html_instructions" : "Prendre \u003cb\u003eà gauche\u003c/b\u003e sur \u003cb\u003eKennet St\u003c/b\u003e",
                            "maneuver" : "turn-left",
                            "polyline" : {
                                "points" : "c{jyHz_LASASAKCMM]Uo@ESGSAOAQ?SAwAFkB@c@FuCKcBAa@"
                            },
                            "start_location" : {
                                "lat" : 51.5065805,
                                "lng" : -0.0666981
                            },
                            "travel_mode" : "DRIVING"
                        },
                        {
                            "distance" : {
                                "text" : "77 m",
                                "value" : 77
                            },
                            "duration" : {
                                "text" : "1 minute",
                                "value" : 28
                            },
                            "end_location" : {
                                "lat" : 51.5064421,
                                "lng" : -0.0627423
                            },
                            "html_instructions" : "Prendre \u003cb\u003eà droite\u003c/b\u003e sur \u003cb\u003eFowey Close\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003eVotre destination se trouvera sur la droite\u003c/div\u003e",
                            "maneuver" : "turn-right",
                            "polyline" : {
                                "points" : "a}jyHhhKrAANABA@C@G?ECEMG"
                            },
                            "start_location" : {
                                "lat" : 51.5068938,
                                "lng" : -0.0629257
                            },
                            "travel_mode" : "DRIVING"
                        }
                    ],
                    "via_waypoint" : []
                }
            ],
            "overview_polyline" : {
                "points" : "ypjyHxpPc@w@qAeBI?UW_@e@IKoAw@w@[g@OgHeBqAc@sAa@yA]qA[GB_@EM?QHGT?nAFd@H^Xf@RNXLZ}DL}ALiB|@sN^cFJiCC_AGiAQoAo@uBYiAGm@AgADmC\\kC?[EeDEkAOmBcA_GEa@?UDSRc@T]VYj@a@j@y@XYHAJORg@l@eCb@kBLg@H{@?o@Ck@k@gGMoAi@uCo@uCxA}@v@y@Vc@RUVOj@M~CAp@?\\FCg@EYc@mAMg@Ca@AkBHoCFuCKcBAa@rAARCBKCKMG"
            },
            "summary" : "A3",
            "warnings" : [],
            "waypoint_order" : []
        }
    ],
    "status" : "OK"
};

我看到有些字段折线中有一些奇怪的数据，但我不知道它代表什么。我怎样才能显示这些？

Answer 1

那是谷歌地图编码的折线。
您可以使用此库以适当的分辨率对它们进行解码:

Polyline decoder (and encoder)

基本上，它们是一个 ascii 编码的二进制结构，包含一组用于多个缩放级别的折线。