Flutter google 地图图像标记不会出现在中心

Question

在我的 Flutter 应用程序中，我想在 google 地图的中心添加一个标记图像和 spinkit，但它显示在一个白色容器内。并且不在地图上。我怎样才能把它放在中心，它应该在地图移动时保持静止。以下是问题图片：

image of the issue

setState((){
  currentLocation = LatLng(locationData.latitude, locationData.longitude);
});
void onCreated(GoogleMapController controller){
  _mapController = controller;
}
return Scaffold(
  body: SafeArea(
    child:Stack(
      children:[
        Column(
          children:[
            Expanded(
              child: GoogleMap(
                initialCameraPosition: CameraPosition(
                  target: currentLocation,
                  zoom:14.4746,
                ),
                zoomControlsEnabled: false,
                minMaxZoomPreference: MinMaxZoomPreference(1.5,20.8),
                myLocationEnabled: true,
                myLocationButtonEnabled: true,
                mapType: MapType.normal,
                mapToolbarEnabled: true,
                onCameraMove: (CameraPosition position)
                {
                  setState((){
                    _locating=true;
                  });
                  locationData.onCameraMove(position);
                },
                onMapCreated: onCreated,
                onCameraIdle: (){
                  setState((){
                    _locating=false;
                  });
                  locationData.getMoveCamera();
                },
              ),
            ),
            Center(
              child: Container(
                height:50,
                // margin:EdgeInsets.only(bottom:40),
                child: Image.asset('images/marker.png'),
            ),
            ),
            Center(
              child: SpinKitPulse(
                color:Colors.black54,
                size:100.0,
              ) ,
            ),

            Container(
              height:230,
              width:MediaQuery.of(context).size.width,
              color: Colors.white,
              child:Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children:[
                  _locating ? LinearProgressIndicator(
                    backgroundColor: Colors.transparent,
                    valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
                  ) : Container(),
                  Padding(
                    padding: const EdgeInsets.only(left: 10, right: 20),
                    child: TextButton.icon(
                      onPressed:(){},
                      icon: Icon(
                        Icons.location_searching,
                        color: Theme.of(context).primaryColor,
                      ),
                      label: Flexible(
                        child: Text(
                         _locating ? 'Locating'
                             : locationData.selectedAddress.featureName,
                          overflow:TextOverflow.ellipsis,
                          style: TextStyle(
                              fontWeight:FontWeight.bold,
                            fontSize: 20,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 20, right: 20),
                    child: Text(
                      _locating ? '': locationData.selectedAddress.addressLine,
                      style: TextStyle(color:Colors.black54),
                    ),
                  ),
                  SizedBox(height:30,),
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width-40,
                      child: AbsorbPointer(
                        absorbing: _locating ? true : false,
                        child: TextButton(
                          style:TextButton.styleFrom(
                            backgroundColor:_locating ? Colors.grey: Theme.of(context).primaryColor,
                          ),
                          onPressed:(){
                            if(_loggedIn==false){
                              Navigator.pushNamed(context, LoginScreen.id);
                            }
                            else{
                              _auth.updateUser(
                                id: user.uid,
                                number: user.phoneNumber,
                                latitude:locationData.latitude,
                                longitude:locationData.longitude,
                                address: locationData.selectedAddress.addressline,
                              );
                              Navigator.pushNamed(context, HomeScreen.id);
                            }
                          },
                          child: Text(
                            'CONFIRM LOCATION',
                            style: TextStyle(
                                color: Colors.white,
                            ),
                          ),

                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    ),
  ),
);

Answer 1

如果简化小部件树，您会看到所有内容都放在 Column 中，而不是 Stack:

return Scaffold(
  body: SafeArea(
    child: Stack( // remove this
      children:[
        Column(
          children:[
            Expanded(...),
            Center(...),
            Center(...),

            Container(
              height:230,
              width:MediaQuery.of(context).size.width,
              color: Colors.white,
              child:Column(...),
            ),
          ],
        ),
      ],
    ),
  ),
);

您应该删除第一个 Stack 小部件，因为它什么都不做，而是将 仅地图和标记 放在它们自己的 Stack 中.像这样：

return Scaffold(
  body: SafeArea(
    child: Column(
      children: [
        Expanded( 
          child: Stack(
            children: [
              GoogleMap(...),
              Center(...), // the marker
              Center(...), // some other part of the marker, I assume
            ],
          ),
        ),
        // Other contents below the map
        Container(
          height: 230,
          width: MediaQuery.of(context).size.width,
          color: Colors.white,
          child: Column(...),
        ),
      ],
    ),
  ),
);

我无法运行代码，因为它不完整，因此可能存在一些语法错误，但希望我传达了这个想法。

Flutter google 地图图像标记不会出现在中心

Flutter google map Image marker wont come in the center

flutter

dart

google-maps-api-3

google-maps-markers