如何解码折线并使用“@react-google-maps/api”将其绘制在谷歌地图上

Question

我正在尝试使用

@react-google-maps/api

库在 React 组件上渲染 Google 地图并在地图上绘制折线，但是，来自后端的折线数据是这样编码的......

@iBwCyC}FiA_BkAqBcDuD_GwF}KcJkTwQwVuSiPeNyJeIaEaEsZeWmMmKgg@cb@mToQqIqG_EiB}Aa@uCYyBI_CHeBVoI|B_Cn@qCb@eF^mAFcZEuEEqCM}BYqCaAuC_BcBqA}@iA{AwBaAmBgB}FyIaC{@mA_FsKuDgIwC_He@eA}JuTgS{c@yTcf@yLyVePm\\

如何解码该线并使用

@react-google-maps/api

将其绘制在地图上？

Answer 1

@react-google-maps/api 没有解码器，但你可以使用这个 package

import { decode, encode } from "@googlemaps/polyline-codec";

const encoded = "_p~iF~ps|U_ulLnnqC_mqNvxq`@";
console.log(decode(encoded, 5));
// [
//   [38.5, -120.2],
//   [40.7, -120.95],
//   [43.252, -126.453],
// ]