Как отображать полилинии «Google API» с лифтом?

Question

Я хотел бы показать маршрут на карте с лифтом.

Для этого я делаю запрос на API API карт Google. Я получаю 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

Это Google карты кодированной ломаной линии. Вы можете использовать эту библиотеку, чтобы декодировать их в соответствующем разрешении:

Polyline decoder (and encoder)

В основном они представляют собой ASCII-кодировке структуры, содержащей набор полилиний для нескольких уровней масштабирования.

Answer 2

Данные полилинии закодированы. У меня была эта же проблема, создающая рубигем, чтобы сделать более или менее то же самое. Я наткнулся на сценарий, написанный парнем по имени Джордж Ланц, который декодирует строку в точки. Я включил его в рубин в моем драгоценном камне. Вероятно, вы можете определить логику на любом языке, который вы предпочитаете.

Ruby Script to Decode GMaps Polyline Data

Answer 3

Фактически вы можете использовать плагин «Листовка»: Leaflet.encoded. Это поместит полилинию Google Encoded на карту Leaflet.