如何在 Vue.js 应用程序中解码并绘制 Encoded Polyline 到地图上？

2024-03-15 11:25:24

解码 Encoded Polyline 并将其绘制到 Vue.js 地图

简介

Polyline 是用于在地图上表示路径的编码字符串。 Google 提供了一种实用工具来解码这些 polyline。本文将探讨如何在 Vue.js 应用程序中利用该工具解码和显示 Google 地图上的 polyline。

解码 Encoded Polyline

要解码 Encoded Polyline，可以使用 JavaScript 的 fetch API 向 Google 的 Polyline Decoder 终点发送请求。这是代码示例：

import { decodePolyline } from "@googlemaps/polyline-codec";

const decodedPolyline = decodePolyline(encodedPolyline);

这将把 Encoded Polyline 解码成一个包含纬度和经度坐标的数组。

在地图上显示 Polyline

要在地图上显示已解码的 Polyline，可以使用 Google Maps Platform Vue.js 库中的 GMapPolyline 组件。示例如下：

<GMapPolyline
  :path="decodedPolyline"
  :strokeColor="#FF0000"
  :strokeWeight="2"
/>

这将在地图上添加一条红色、宽度为 2 的 polyline，其坐标由 decodedPolyline 数组指定。

完整 Vue.js 组件

以下是一个包含解码 polyline 和显示逻辑的完整 Vue.js 组件：

<template>
  <div>
    <GMapMap
      :center="center"
      :zoom="13"
      map-type-id="terrain"
      style="width: 100%; height: 100%; position: absolute"
    >
      <GMapPolyline
        :path="decodedPolyline"
        :strokeColor="#FF0000"
        :strokeWeight="2"
      />
    </GMapMap>
  </div>
</template>

<script>
import { decodePolyline } from "@googlemaps/polyline-codec";

export default {
  data() {
    return {
      center: { lat: 31.950695, lng: 35.923022 },
      encodedPolyline: "{encodedPolyline from Google's computeRoute API}",
      decodedPolyline: [],
    };
  },
  created() {
    // 解码 polyline 在组件创建时
    this.decodedPolyline = decodePolyline(this.encodedPolyline);
  },
};
</script>

附加说明

确保使用 Google computeRoute API 返回的实际 Encoded Polyline 替换 {encodedPolyline from Google's computeRoute API}。
需要在项目中安装 @googlemaps/polyline-codec 软件包才能使用 decodePolyline 函数。
可以根据需要调整 strokeColor 和 strokeWeight 属性以定制地图上 polyline 的外观。

常见问题解答