问题是缩放控件。我可以看到显示缩放控件出现,但我想更改Zoomcontrols的位置,以显示在右侧。是否可以更改Zoom控件的位置。
我没有找到任何解决方案,因此我创建了自定义缩放控件,并使用地图控制器将其添加到地图上。
Positioned(
top: 100,
left: 5,
child: Card(
elevation: 2,
child: Container(
color: Color(0xFFFAFAFA),
width: 40,
height: 100,
child: Column(
children: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () async {
var currentZoomLevel = await _controller.getZoomLevel();
currentZoomLevel = currentZoomLevel + 2;
_controller.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: locationCoords,
zoom: currentZoomLevel,
),
),
);
}),
SizedBox(height: 2),
IconButton(
icon: Icon(Icons.remove),
onPressed: () async {
var currentZoomLevel = await _controller.getZoomLevel();
currentZoomLevel = currentZoomLevel - 2;
if (currentZoomLevel < 0) currentZoomLevel = 0;
_controller.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: locationCoords,
zoom: currentZoomLevel,
),
),
);
}),
],
),
),
),
);
GoogleMap(
initialCameraPosition: CameraPosition(
target: _locationCoords, zoom: 12.0),
markers: Set.from(allMarkers),
onMapCreated: mapCreated,
zoomControlsEnabled: true,
zoomGesturesEnabled: true,
scrollGesturesEnabled: true,
compassEnabled: true,
padding: EdgeInsets.only(
bottom:MediaQuery.of(context).size.height*0.25),
)
您还可以使用AnimateCamera方法使用CameraupDate类,例如:
void zoomIn() async {
final controller = await _controller.future;
final zoom = await controller.getZoomLevel();
controller.animateCamera(CameraUpdate.zoomTo(zoom + 1));
}
void zoomOut() async {
final controller = await _controller.future;
final zoom = await controller.getZoomLevel();
controller.animateCamera(CameraUpdate.zoomTo(zoom - 1));
}