Flutter 如何让 uber 或 ola 之类的汽车图标在谷歌地图上移动

Sai*_*uri 4 maps android dart flutter flutter-animation

我正在 flutter 中开发一个公交车跟踪应用程序,但在使用 google_maps_flutter 制作移动公交车图标动画时感到震惊,我尝试使用标记,但它在标记上没有任何动画,我不知道如何解决这种情况,有什么可以制作移动动画吗地图中的标记

Hay*_*ahi 6

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

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)
           )
        );
  }
Run Code Online (Sandbox Code Playgroud)