如何在AGM搭建的谷歌地图中添加指定三角形区域内的路线图？

现有代码仅完成了基础地图渲染、单点标记的逻辑，缺少路线服务调用、区域范围校验、路线绘制的相关逻辑，按以下步骤调整即可实现需求：

• 变量命名修正：原有代码中long是JS保留关键字，建议修改为lng；类方法内调用属性需用小写this而非大写This
• 提前定义你需要限制的三角形区域三个顶点的经纬度坐标，用于后续路线点范围过滤
• 引入Google Maps Directions API实现路线查询，获取路线点集后过滤出落在三角形区域内的部分，再通过Polyline绘制到地图上

// 基础地图配置
locationChoosen = false;
lat = 63.4313378;
lng = 10.4015246;
zoom = 7;
map: any;
// 替换为你实际的三角形区域三个顶点坐标
trianglePoints = [
  { lat: 63.5, lng: 10.3 },
  { lat: 63.4, lng: 10.5 },
  { lat: 63.3, lng: 10.2 }
];
// 点是否在三角形内判断算法
pointInTriangle (p, a, b, c) {
  const v0 = { x: c.lng - a.lng, y: c.lat - a.lat };
  const v1 = { x: b.lng - a.lng, y: b.lat - a.lat };
  const v2 = { x: p.lng - a.lng, y: p.lat - a.lat };
  const dot00 = v0.x * v0.x + v0.y * v0.y;
  const dot01 = v0.x * v1.x + v0.y * v1.y;
  const dot02 = v0.x * v2.x + v0.y * v2.y;
  const dot11 = v1.x * v1.x + v1.y * v1.y;
  const dot12 = v1.x * v2.x + v1.y * v2.y;
  const invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
  const u = (dot11 * dot02 - dot01 * dot12) * invDenom;
  const v = (dot00 * dot12 - dot01 * dot02) * invDenom;
  return (u >= 0) && (v >= 0) && (u + v < 1);
}
onChoseLocation(event) {
  this.locationChoosen = true;
}
initDrawingManager(map) {
  // 原有绘制逻辑保留，新增路线查询逻辑
  const directionsService = new google.maps.DirectionsService();
  const request = {
    // 替换为你实际的路线起点、终点
    origin: new google.maps.LatLng(63.430, 10.390),
    destination: new google.maps.LatLng(63.432, 10.410),
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, (response, status) => {
    if (status == google.maps.DirectionsStatus.OK) {
      const routePoints = response.routes[0].overview_path;
      // 过滤出落在三角形区域内的路线点
      const filteredPoints = routePoints.filter(point => {
        const p = { lat: point.lat(), lng: point.lng() };
        return this.pointInTriangle(p, this.trianglePoints[0], this.trianglePoints[1], this.trianglePoints[2]);
      });
      // 绘制过滤后的路线
      new google.maps.Polyline({
        path: filteredPoints,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });
    }
  });
}
onMapReady(map) {
  this.map = map;
  this.initDrawingManager(map);
}

<agm-map 
  [latitude]="lat" 
  [longitude]="lng"
  (mapReady)="onMapReady($event)"
  (mapClick)="onChoseLocation($event)"
  [zoom]="zoom"
>
  <agm-marker 
    [latitude]="lat" 
    [longitude]="lng"
  >    
  </agm-marker>
</agm-map>

注意：需要确保你项目的AGM配置已经正确引入Google Maps的相关API权限，否则路线服务会调用失败；如果你的路线是自定义的固定坐标点，可直接替换路线请求部分的逻辑，直接传入你的坐标点集做过滤绘制即可。

内容的提问来源于stack exchange，提问作者virendra kumawat