颤振谷歌地图图像标记不会出现在中心

Posted 2023-03-28

【中文标题】颤振谷歌地图图像标记不会出现在中心

【英文标题】：Flutter google map Image marker wont come in the center

【发布时间】：2021-11-03 00:07:15

【问题描述】：

在我的 Flutter 应用程序中，我想在我的谷歌地图中心添加一个标记图像和 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,
                            ),
                          ),

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

【参考方案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(...),
        ),
      ],
    ),
  ),
);

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

【讨论】：

非常感谢您，非常感谢您UUUUUUUUU

@vansika 如果答案对您有帮助，请考虑接受：)