基于Google Map iOS SDK沿自定义路线创建指定宽度区域的技术问询

嘿，针对你在Google Maps iOS SDK中实现带自定义宽度的路线区域的需求，结合你已经完成的标记拖拽、GMSMutablePath多边形基础，我整理了一套完整的解决方案，还会帮你解决常见的坑：

要实现手绘草图里的路线区域，本质是把用户规划的起点-拐点-终点路径，向左右两侧各偏移指定宽度的一半，然后把左右两条偏移路径首尾连接，形成闭合的多边形。

1. 用地理坐标偏移计算生成两侧路径 #

Google Maps SDK自带了坐标偏移的工具函数GMSGeometryOffset，可以直接根据距离和方位角计算偏移后的坐标，比自己实现更精准，还能自动处理不同纬度的距离差异。

2. 处理拐点的偏移逻辑 #

• 起点/终点：用相邻线段的方向计算左右偏移
• 中间拐点：用前后线段的角平分线方向计算偏移，避免尖锐角出现缺口或重叠

3. 构建闭合多边形路径 #

把左侧偏移路径按顺序添加，再把右侧偏移路径倒序添加（从最后一个点到第一个点），最后连接回左侧路径的起点，形成闭合的GMSMutablePath，再创建GMSPolygon。

import GoogleMaps

// 生成带宽度的路线区域多边形
func generateRouteAreaPolygon(from waypoints: [CLLocationCoordinate2D], widthMeters: CLLocationDistance) -> GMSPolygon? {
    guard waypoints.count >= 2 else { return nil } // 至少需要起点和终点
    
    let leftOffsetPath = GMSMutablePath()
    let rightOffsetPath = GMSMutablePath()
    
    for (index, coord) in waypoints.enumerated() {
        var bearing: CLLocationDirection
        
        if index == 0 {
            // 起点：用下一个点的方向
            let nextCoord = waypoints[index + 1]
            bearing = GMSGeometryHeading(coord, nextCoord)
        } else if index == waypoints.count - 1 {
            // 终点：用上一个点的方向
            let prevCoord = waypoints[index - 1]
            bearing = GMSGeometryHeading(prevCoord, coord)
        } else {
            // 中间拐点：计算前后线段的角平分线方向
            let prevCoord = waypoints[index - 1]
            let nextCoord = waypoints[index + 1]
            let headingTo = GMSGeometryHeading(coord, nextCoord)
            let headingFrom = GMSGeometryHeading(prevCoord, coord)
            // 计算角平分线（简化版，复杂场景可以用向量计算）
            bearing = (headingFrom + headingTo) / 2
        }
        
        // 计算左右偏移点：向左偏移是 bearing - 90°，向右是 bearing + 90°
        let halfWidth = widthMeters / 2
        let leftCoord = GMSGeometryOffset(coord, halfWidth, bearing - 90)
        let rightCoord = GMSGeometryOffset(coord, halfWidth, bearing + 90)
        
        leftOffsetPath.add(leftCoord)
        rightOffsetPath.add(rightCoord)
    }
    
    // 构建闭合路径：左路径 + 倒序的右路径 + 左路径起点
    let finalPath = GMSMutablePath(path: leftOffsetPath)
    // 倒序添加右路径的点，确保多边形闭合
    for i in (0..<rightOffsetPath.count()).reversed() {
        finalPath.add(rightOffsetPath.coordinate(at: i))
    }
    finalPath.add(leftOffsetPath.coordinate(at: 0))
    
    // 创建多边形并设置样式
    let polygon = GMSPolygon(path: finalPath)
    polygon.fillColor = UIColor.systemBlue.withAlphaComponent(0.3)
    polygon.strokeColor = UIColor.systemBlue
    polygon.strokeWidth = 2.0
    return polygon
}

// 拖拽标记时更新多边形的逻辑示例
func handleMarkerDrag(_ markers: [GMSMarker]) {
    // 按顺序收集所有标记的坐标（确保是起点→拐点→终点的顺序）
    let waypoints = markers.map { $0.position }
    // 假设你已经保存了用户输入的宽度值
    let width = 50.0 // 示例宽度，米
    // 移除旧的多边形（如果有的话）
    self.routeAreaPolygon?.map = nil
    // 生成新的多边形并添加到地图
    self.routeAreaPolygon = generateRouteAreaPolygon(from: waypoints, widthMeters: width)
    self.routeAreaPolygon?.map = self.googleMapView
}

1. 拖拽标记后多边形不更新：在GMSMarker的didDrag回调里，调用上面的handleMarkerDrag方法，重新收集标记坐标、生成多边形即可。
2. 拐点处出现缺口/重叠：如果用角平分线还是有问题，可以尝试对拐点处的偏移点做圆角处理，或者使用更复杂的缓冲路径算法（比如结合GMSGeometryOffset和线段交点计算）。
3. 宽度显示不一致：用SDK自带的GMSGeometryOffset就能解决，它会根据地球曲率自动调整不同纬度的偏移量，确保宽度在地图上显示均匀。
4. 路径闭合问题：一定要把右侧路径倒序添加，否则多边形会出现交叉，无法正确填充区域。

内容的提问来源于stack exchange，提问作者Sauvik Dolui