在我的扑翼应用程序中。我正在使用google_maps_plugin
。链接是https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter。我想在拖动地图后将标记固定在地图的中心而不会移动。我想它喜欢http://jsfiddle.net/UuDA6/在我的代码中我使用MarkerOption
放置标记。
MarkerOptions options = new MarkerOptions(
alpha: 1.0,
anchor: Offset(0.5, 1.0),
consumeTapEvents: false,
draggable: false,
flat: false,
icon: BitmapDescriptor.defaultMarker,
infoWindowAnchor: Offset(0.5, 0.0),
infoWindowText: InfoWindowText.noText,
position: LatLng(17.411439, 78.5486697),
rotation: 0.0,
visible: true,
zIndex: 0.0,
);
但在position
我想知道如何给地图的中心。
如果有人对此有所了解,请分享。
实际上随着google_maps_flutter: ^0.4.0的新更新我们可以轻松达到上述要求。
这是演示link。
Map<MarkerId, Marker> _markers = <MarkerId, Marker>{};
int _markerIdCounter = 0;
Completer<GoogleMapController> _mapController = Completer();
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: GoogleMap(
markers: Set<Marker>.of(_markers.values),
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: Constants.LOCATION_SRI_LANKA,
zoom: 12.0,
),
myLocationEnabled: true,
onCameraMove: (CameraPosition position) {
if(_markers.length > 0) {
MarkerId markerId = MarkerId(_markerIdVal());
Marker marker = _markers[markerId];
Marker updatedMarker = marker.copyWith(
positionParam: position.target,
);
setState(() {
_markers[markerId] = updatedMarker;
});
}
},
),
)
void _onMapCreated(GoogleMapController controller) async {
_mapController.complete(controller);
if ([INITIAL_LOCATION] != null) {
MarkerId markerId = MarkerId(_markerIdVal());
LatLng position = [INITIAL_LOCATION];
Marker marker = Marker(
markerId: markerId,
position: position,
draggable: false,
);
setState(() {
_markers[markerId] = marker;
});
Future.delayed(Duration(seconds: 1), () async {
GoogleMapController controller = await _mapController.future;
controller.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: position,
zoom: 17.0,
),
),
);
});
}
}
String _markerIdVal({bool increment = false}) {
String val = 'marker_id_$_markerIdCounter';
if (increment) _markerIdCounter++;
return val;
}
这是基于@Joe的答案,但它有更准确的针位置,不需要其他类:
double mapWidth = MediaQuery.of(context).size.width;
double mapHeight = MediaQuery.of(context).size.height - 215;
double iconSize = 40.0;
return new Stack(
alignment: Alignment(0.0, 0.0),
children: <Widget>[
new Container(
width: mapWidth,
height: mapHeight,
child: _googleMap
),
new Positioned(
top: (mapHeight - iconSize)/ 2,
right: (mapWidth - iconSize)/ 2,
child: new Icon(Icons.person_pin_circle, size: iconSize),
)
]);
当用户更新位置时,此解决方案不需要重新绘制整个屏幕(没有setState调用)。你不会看到奇怪的标记“运动”。
可以使用堆栈。代码如下所示。
Stack(
children: <Widget>[
GoogleMap(
onMapCreated: _onMapCreated,
),
InfoView()
],)
InfoView是
class InfoView extends State<AppPage> {
const InfoView({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Align(
alignment: Alignment.center,
child: new Icon(Icons.person_pin_circle, size: 40.0),
);
}
}
那么_onMapCreated就是
void _onMapCreated(GoogleMapController controller) {
setState(() {
mapController = controller;
mapController.animateCamera(CameraUpdate.newCameraPosition(
CameraPosition(
bearing: 270.0,
target: LatLng(lattitude, longitude),
tilt: 30.0,
zoom: 17.0,
),
));
});
}
}
如果要以简单的方式重叠多个子节点,例如具有一些文本和图像,用渐变和附加到底部的按钮覆盖,则此堆栈类非常有用。