Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to integrate Amap with Flutter and add custom Maker". In daily operation, I believe many people have doubts about how to integrate Amap with Flutter and add custom Maker. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to integrate Amap with Flutter and add custom Maker". Next, please follow the editor to study!

First, enter Amap's open platform to apply for Key

The Android side needs to set the release version and debug version SHA1 values, which can be obtained through AndroidStudio's own tools.

Clicking will generate a modal SHA1 value. The release version is the same.

Then we can click submit after setting the SHA1 value and package name.

IOS is relatively simple, you only need to set up BundleId.

II. Yaml file integration plug-in

Here I use version 3.0.0 (location function depends on personal needs integration).

# Amap, location amap_flutter_location: ^ 3.0.0amap_flutter_map: ^ 3.0.0

At this time, we have successfully integrated the map function into our Flutter project. Initialization: add an AMapWidget control to the page we need, and adjust the following parameters according to your own needs

AMapWidget (mapType: MapType.navi,// Map Type / / customStyleOptions: CustomStyleOptions (/ / true, / / styleData: styleData, / / styleExtraData: styleExtraData, / /), / / offline Map add onTap: widget.onTap,// Map Click event rotateGesturesEnabled: false,// rotation gesture tiltGesturesEnabled: false,// tilt gesture scaleEnabled: false / / translate scrolling / / Privacy Policy Compliance privacyStatement: AMapPrivacyStatement (hasContains: true, hasShow: true, hasAgree: true), apiKey: GdMap.aMapApiKey,// double-ended key value initialization onMapCreated: onMapCreated,// creation callback markers: Set.of (_ initMarkerMap.values), / / Custom add tag / / onLocationChanged: (M) {/ / print ("location callback-- ${m.accuracy}") / / print ("position callback precision-- ${m.latLng.latitude}"); / / print ("position callback dimension-${m.latLng.longitude}"); / /}, onCameraMoveEnd: (pos) {/ / Zoom level var zoom = pos.zoom; this.zoom = zoom; mapCenter = LatLng (pos.target.latitude, pos.target.longitude) / / Update central point if (isLoad) {/ / add maker loadMakers (pos.target.latitude, pos.target.longitude);}},)

Special note: the parameter of privacy policy compliance must be set, otherwise the map cannot be loaded, and it must be initialized after the pop-up window is installed for the first time. At present, the state attaches great importance to the personal privacy policy, and the audit of the Android application market has also increased the audit of personal privacy. The integration is basically completed here, and you can expand it according to your own business needs.

Add a custom Maker

The official overlay only supports adding Bitmap types, not adding a custom control or custom layout as native.

/ Icon final BitmapDescriptor icon of the cover

But there is an official way to do this: through byte stream conversion, my idea is to convert custom Widget to byte stream and then to bitmap.

/ / create BitmapDescriptorstatic BitmapDescriptor fromBytes (Uint8List byteData) {return BitmapDescriptor._ (['fromBytes', byteData]) based on the binary data [byteData] converted from PNG images;}

Idea: convert our Widget to image through RenderObjectToWidgetElement, and then convert image to byte stream, which perfectly implements the requirements of custom Maker.

Note: custom Widget if there is a text Text component, then you must add Directionality nesting and add the textDieecton attribute, this attribute represents the writing order, from left to right, some countries are from right to left, so this requires attention.

Child: Directionality (textDirection: TextDirection.ltr, child:child)

Source code:

Static Future widgetToImage (Widget widget, {Alignment alignment = Alignment.center, Size size = const Size (double.maxFinite, double.maxFinite), double devicePixelRatio = 1.0,1.0}) async {RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary (); RenderView renderView = RenderView (child: RenderPositionedBox (alignment: alignment, child: repaintBoundary), configuration: ViewConfiguration (size: size, devicePixelRatio: devicePixelRatio,), window: ui.window, PipelineOwner pipelineOwner = PipelineOwner () PipelineOwner.rootNode = renderView; renderView.prepareInitialFrame (); BuildOwner buildOwner = BuildOwner (focusManager: FocusManager ()); RenderObjectToWidgetElement rootElement = RenderObjectToWidgetAdapter (container: repaintBoundary, child: widget,) .attachToRenderTree (buildOwner); buildOwner.buildScope (rootElement); buildOwner.finalizeTree (); pipelineOwner.flushLayout (); pipelineOwner.flushCompositingBits (); pipelineOwner.flushPaint (); ui.Image image = await repaintBoundary.toImage (pixelRatio: pixelRatio); ByteData? ByteData = await image.toByteData (format: ui.ImageByteFormat.png); return byteData;} at this point, the study on "how Flutter integrates Amap and adds a custom Maker" is over. I hope I can solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.