You can customize how users interact with your map by enabling or disabling map interaction gestures and specifying the visibility of built-in UI controls. For details, please refer to Flutter Sample Code.
Huawei maps are moved by simulating camera movement. You can control the visible region of a map by changing the camera's position. To change the camera's position, create different types of CameraUpdate objects.
To simulate camera movement, you can call the animateCamera or moveCamera method in the HuaweiMapController object.
The sample code is as follows:
HuaweiMapController mapController;
...
void _onMapCreated(HuaweiMapController controller) {mapController = controller;}
... Methods of creating a CameraUpdate object are as follows:
// Method 1: Increase the camera zoom level by 1 and retain other attribute settings. CameraUpdate cameraUpdate = CameraUpdate.zoomIn(); // Method 2: Decrease the camera zoom level by 1 and retain other attribute settings. CameraUpdate cameraUpdate = CameraUpdate.zoomOut(); // Method 3: Set the camera zoom level to a specified value and retain other attribute settings. double zoom = 8; CameraUpdate cameraUpdate = CameraUpdate.zoomTo(zoom); // Method 4: Increase or decrease the camera zoom level by a specified value. double amount = 2; CameraUpdate cameraUpdate = CameraUpdate.zoomBy(amount); // Method 5: Move the camera to the specified center point and increase or decrease the camera zoom level by a specified value. // Set the position of a point on the screen. double amount = 2; CameraUpdate cameraUpdate = CameraUpdate.(amount, Offset(2.0, 2.0)); // Method 6: Set the latitude and longitude of the camera and retain other attribute settings. LatLng latLng1 = new LatLng(31.5, 118.9); CameraUpdate cameraUpdate = CameraUpdate.newLatLng(latLng1); // Method 7: Set the visible region and padding. double padding = 100; LatLng latLng1 = new LatLng(31.5, 118.9); LatLng latLng2 = new LatLng(32.5, 119.9); LatLngBounds latLngBounds = new LatLngBounds(latLng1, latLng2); CameraUpdate cameraUpdate = CameraUpdate.newLatLngBounds(latLngBounds, padding); // Method 8: Set the center point and zoom level of the camera. double zoom = 10; LatLng latLng2 = new LatLng(32, 119); CameraUpdate cameraUpdate = CameraUpdate.newLatLngZoom(latLng2, zoom); // Method 9: Scroll the camera by specified pixels. double x = 100; double y = 100; CameraUpdate cameraUpdate = CameraUpdate.scrollBy(x, y); // Method 10: Specify the camera position. CameraUpdate.newCameraPosition(CameraPosition( bearing: 2.2, target: LatLng(1, 1), tilt: 13, zoom: 13)); CameraUpdate cameraUpdate = CameraUpdate.newCameraPosition(cameraPosition);
Methods of changing the camera position are as follows:
You can move the map camera in animation or non-animation mode.
CameraUpdate cameraUpdate = .... mapController.moveCamera(cameraUpdate);
CameraUpdate cameraUpdate = .... mapController.animateCamera(cameraUpdate);
The Map Kit plugin for Flutter allows you to set the map camera bounds. You can use the cameraTargetBounds attribute to specify a LatLngBounds object to constrain the camera target so it will not get out of the specified bounds when users scroll the map camera.
If this parameter is set to null or CameraTargetBounds.unbounded, the map camera bounds are cleared.
You can use attributes in the HuaweiMap object to control the visibility of UI controls, and set allowed map gestures. UI controls include the zoom controls, compass, and my-location icon.
The Map Kit plugin for Flutter provides built-in zoom controls, which are enabled by default.
The sample code is as follows:
// Specify whether to enable the zoom controls.
HuaweiMap(
zoomControlsEnabled: false,
... The Map Kit plugin for Flutter provides the compass function. By default, a compass is displayed in the upper right corner of the map. If the compass is enabled and the map is not oriented to the due north, a compass icon is displayed in the upper right corner of the map. A user can tap the compass icon to rotate the map to be oriented to the due north. If the compass is enabled and the map is oriented to the due north, the compass icon is hidden. If the compass is disabled, the compass icon will not be displayed.
The sample code is as follows:
// Specify whether to enable the compass.
HuaweiMap(
compassEnabled: false,
... Before enabling the my-location function, ensure that your app has the android.permission.ACCESS_FINE_LOCATION and android.permission.ACCESS_COARSE_LOCATION permissions and the my-location layer has been enabled. The my-location icon is displayed on a map only after being enabled.
The sample code is as follows:
// Enable the my-location layer.
HuaweiMap(
myLocationEnabled: true,
...
// Enable the function of displaying the my-location icon.
HuaweiMap(
myLocationButtonEnabled: true,
... You can use attributes in the HuaweiMap class to enable or disable a map gesture.
// Specify whether to enable the zoom gestures.
HuaweiMap(
zoomGesturesEnabled: false,
...// Specify whether to enable the scroll gestures.
HuaweiMap(
scrollGesturesEnabled: false,
...// Specify whether to enable the tilt gestures.
HuaweiMap(
tiltGesturesEnabled: false,
...// Specify whether to enable the rotate gestures.
HuaweiMap(
rotateGesturesEnabled: false,
...This section describes how to set listeners for map tap events, long press events, and camera movement events.
HuaweiMap(
onClick: (LatLng latLng) { log("Map Clicked at $latLng"); },
...HuaweiMap(
onLongPress: (LatLng latlng) { log("Map LongClicked at $latlng"); },
...After a listener is set for camera movement events, the application layer can listen on the camera movement status.
HuaweiMap(
onCameraMove: (CameraPosition pos) => { print( "onCameraMove: ${pos.target.lat} : ${pos.target.lng}") },
onCameraIdle: () { print("onCameraIdle"); },
onCameraMoveStarted: () { print("onCameraMoveStarted"); }),
...Marker(
markerId: MarkerId('marker_id_0'),
position: LatLng(41.012959, 28.997438),
clickable: false,
onClick: () {
log('marker #0 clicked');
},
...Marker(
markerId: MarkerId('marker_id_1'),
position: LatLng(41.002919, 28.980701),
infoWindow: InfoWindow(
title: 'Marker Title #1',
snippet: 'Marker Desc #1',
onClick: () {
log("infoWindow clicked");
}),
onClick: () {
log('marker #1 clicked');
},
...