android - Flutter 如何让 uber 或 ola 像在谷歌地图上移动的汽车图标

Question

我正在开发一个 flutter 的公共(public)汽车跟踪应用程序，但对使用 google_maps_flutter 制作移动的公共(public)汽车图标动画感到震惊 map 中的标记

Answer 1

对于这种应用程序，您需要一个源来实时接收位置[您可以使用 node.js 和 socket.io 作为后端]，例如驱动程序应用程序 [在驱动程序应用程序中监听位置更改]，您不需要从驱动程序应用程序接收实时位置时标记的动画调用在 map 上添加标记的方法每次调用 updateDriverMarkersWithCircle() 方法时使用驱动程序的唯一 ID 作为标记 ID，这是我用于此目的的方法，它被调用每次收到驾驶员的位置时，如果接收到的数据具有相同的 id(看起来像移动的汽车)，此方法将更新标记，否则它将使用驾驶员的 id 在 map 上添加一个新标记:
here is the output image

void updateDriverMarkersWithCircle( Map newLocalData ) async{
    final Uint8List markerIcon = await getBytesFromAsset('assets/images/yellow_car.png', 180);
    LatLng latLng = LatLng( newLocalData['lat'], newLocalData['long'] );
      _markers.add( 
           Marker(
              markerId: MarkerId( newLocalData['id'].toString() ),
              position: latLng,
              rotation: newLocalData['heading'].toDouble(),
              draggable: false,
              zIndex: 2,
              flat: true,
              anchor: Offset(0.5, 0.5),
              icon: BitmapDescriptor.fromBytes( markerIcon ))
          );

      _circles.add(
           Circle(
            circleId: CircleId(newLocalData['id'].toString()),
            radius: newLocalData['accuracy'].toDouble(),
            zIndex: 1,
            strokeColor: Colors.blue,
            center: latlng,
            fillColor: Colors.blue.withAlpha(70)
           )
        );
  }