---
title: "<ScriptGoogleMapsPolyline>"
description: "在 Google 地图上绘制响应式路径和路线。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/api/polyline"
last_updated: "2026-08-11T09:33:15.062Z"
---

地图上的线条路径叠加层。将其放置在 [`<ScriptGoogleMaps>`](/scripts/google-maps/api/script-google-maps) 组件内。其选项对应于 [`google.maps.PolylineOptions`](https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions)。

<script-types filter="ScriptGoogleMapsPolyline" script-key="google-maps">



</script-types>

## 用法

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsPolyline
      :options="{
        path: [
          { lat: -34.397, lng: 150.644 },
          { lat: -34.407, lng: 150.654 },
          { lat: -34.417, lng: 150.634 },
        ],
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
      }"
    />
  </ScriptGoogleMaps>
</template>
```

### 测地线

设置 `geodesic: true` 以沿地球曲率绘制。在较长的路径上，这可以避免在端点之间绘制一条屏幕空间中的直线。

```vue
<template>
  <ScriptGoogleMaps
    api-key="your-api-key"
    :map-options="{
      center: { lat: 0, lng: 130 },
      zoom: 3,
    }"
  >
    <ScriptGoogleMapsPolyline
      :options="{
        path: [
          { lat: -33.8688, lng: 151.2093 },
          { lat: 34.0522, lng: -118.2437 },
        ],
        geodesic: true,
        strokeColor: '#4285F4',
        strokeWeight: 3,
      }"
    />
  </ScriptGoogleMaps>
</template>
```

### 虚线

使用带有[符号路径](https://developers.google.com/maps/documentation/javascript/symbols#add_a_symbol_to_a_polyline)的 `icons` 来创建虚线或点线。

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsPolyline
      :options="{
        path: [
          { lat: -34.397, lng: 150.644 },
          { lat: -34.417, lng: 150.664 },
        ],
        strokeOpacity: 0,
        icons: [{
          icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 },
          offset: '0',
          repeat: '20px',
        }],
      }"
    />
  </ScriptGoogleMaps>
</template>
```

### 可编辑折线

```vue
<template>
  <ScriptGoogleMaps api-key="your-api-key">
    <ScriptGoogleMapsPolyline
      :options="{
        path: [
          { lat: -34.397, lng: 150.644 },
          { lat: -34.407, lng: 150.654 },
          { lat: -34.417, lng: 150.634 },
        ],
        editable: true,
        strokeColor: '#34a853',
        strokeWeight: 3,
      }"
      @click="(e) => console.log('Clicked at vertex', e.vertex)"
    />
  </ScriptGoogleMaps>
</template>
```

<callout>

鼠标事件会触发 `google.maps.PolyMouseEvent`，其中包含被点击线段的 `vertex`（顶点）和 `edge`（边）索引。`options` prop 是深度响应式的。

</callout>