能否在AGM中绘制多经纬度？Angular7车辆轨迹追踪技术问询

当然可以！AGM完全支持通过多个经纬度点位来实现完整的车辆轨迹追踪，而且正好能解决你遇到的那些问题。我结合Angular 7+AGM的使用经验，给你详细说下怎么实现：

核心思路：维护完整的轨迹坐标数组 #

你之前用「固定起点+动态终点」的方式，本质上每次只绘制一段线段，自然会出现返程时新增轨迹、回到起点无轨迹的问题。正确的做法是把车辆所有的历史位置都存在一个数组里，然后用AGM的折线组件渲染整个数组的连线。

1. 在组件中维护轨迹数据 #

首先在你的Angular组件里定义一个数组，用来存储所有的车辆经纬度点位：

import { Component } from '@angular/core';
import { LatLngLiteral } from '@agm/core';

@Component({
  selector: 'app-vehicle-tracking',
  templateUrl: './vehicle-tracking.component.html'
})
export class VehicleTrackingComponent {
  // 存储所有轨迹点位
  routeCoordinates: LatLngLiteral[] = [];
  // 车辆当前位置（用来定位地图中心）
  currentLat = 0;
  currentLng = 0;

  // 模拟获取车辆新位置的方法（实际项目中可能是WebSocket推送/API轮询）
  updateVehiclePosition(newLat: number, newLng: number) {
    this.currentLat = newLat;
    this.currentLng = newLng;
    
    // 避免添加重复的点位（可选，根据需求调整阈值）
    const lastPoint = this.routeCoordinates[this.routeCoordinates.length - 1];
    if (!lastPoint || 
        Math.abs(newLat - lastPoint.lat) > 0.0001 || 
        Math.abs(newLng - lastPoint.lng) > 0.0001) {
      this.routeCoordinates.push({ lat: newLat, lng: newLng });
    }
  }
}

2. 在模板中渲染完整轨迹 #

用AGM的agm-polyline和agm-polyline-point组件，遍历轨迹数组渲染整个路径：

<agm-map 
  [latitude]="currentLat" 
  [longitude]="currentLng" 
  [zoom]="12"
  [mapTypeId]="'roadmap'">

  <!-- 渲染完整行驶轨迹 -->
  <agm-polyline 
    [strokeColor]="'#2196F3'" 
    [strokeWeight]="4"
    [strokeOpacity]="0.8">
    <agm-polyline-point 
      *ngFor="let point of routeCoordinates"
      [latitude]="point.lat"
      [longitude]="point.lng">
    </agm-polyline-point>
  </agm-polyline>

  <!-- 车辆当前位置标记 -->
  <agm-marker 
    [latitude]="currentLat" 
    [longitude]="currentLng"
    [iconUrl]="'/assets/car-marker.png'">
  </agm-marker>
</agm-map>

解决你遇到的具体问题 #

• 返程时不会新增独立轨迹：因为轨迹是所有历史点位的连续连线，车辆返程时新的点位会追加到数组末尾，折线会自然延续原有路径，不会出现单独的新线段。
• 回到起点时轨迹依然显示：哪怕车辆回到起点，数组里已经保存了所有走过的点位，折线会完整渲染整个往返路径，不会因为起止点相同而消失。

额外优化建议 #

• 轨迹持久化：如果需要永久保留轨迹，可以把routeCoordinates数组存储到localStorage或者后端数据库，页面刷新后重新加载即可恢复轨迹。
• 轨迹分段样式：如果需要区分去程和返程，可以把轨迹拆分成两个数组（比如goRoute和returnRoute），用两个agm-polyline组件分别渲染，设置不同的颜色。
• 性能优化：如果轨迹点数量极大（比如上万条），可以做轨迹抽稀处理（比如每隔N个点保留一个），减少渲染压力，避免地图卡顿。

内容的提问来源于stack exchange，提问作者Anoop V.U