Make writing a habit together! This is the third day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Currently, the three major map open platforms, Autonavi, Baidu and Tencent, basically support the development and integration of Flutter plug-in. It can also be seen from this that the ecology of Flutter is gradually improving. Here are some steps and personal stumbles for integrating Gaud maps in the Flutter project.

1. Enter the Open platform of Amap to apply for the Key. Android side needs to set the release version and debugging version SHA1 value, which can be obtained through the tools provided by AndroidStudio.Clicking generates the mode SHA1 value. The same is true for release versions.After setting the SHA1 value and package name, click Submit.IOS is relatively easy, you just need to set the BundleId.



2. Yaml file integration plug-in here I use version 3.0.0, (location function depends on personal needs integration).

Amap_flutter_location: ^3.0.0 amap_flutter_map: ^3.0.0Copy the code

At this point we have successfully integrated map functionality into our Flutter project. Initialize: Add the AMapWidget control to the page you want, and adjust the following parameters to suit your needs.

AMapWidget(
  mapType: MapType.navi,// Map type
  // customStyleOptions: CustomStyleOptions(
  // true,
  // styleData: styleData,
  // styleExtraData: styleExtraData,
  //),// Add offline maps on demand
  onTap: widget.onTap,// Map click event
  rotateGesturesEnabled: false.// Rotate gesture
  tiltGesturesEnabled: false.// Tilt gesture
  scaleEnabled: false.// Pan scroll
  // Privacy policy compliance
  privacyStatement: AMapPrivacyStatement(
      hasContains: true, hasShow: true, hasAgree: true),
  apiKey: GdMap.aMapApiKey,// Initializes the Key of both ends
  onMapCreated: onMapCreated,// Create a successful callback
  markers: Set<Marker>.of(_initMarkerMap.values),// Add a custom tag
  // onLocationChanged: (m) {
  // print(${m.accuracy});
  // print(" position callback precision --${m.latlng.latitude}");
  // print(" longitude --${m.latlng.longitude}");
  // },
  onCameraMoveEnd: (pos) {
    // Zoom level
    var zoom = pos.zoom;
    this.zoom = zoom;

    mapCenter =
        LatLng(pos.target.latitude, pos.target.longitude); // Update the center point
    if (isLoad) {
      / / add makerloadMakers(pos.target.latitude, pos.target.longitude); }}),Copy the code

Special attention: privacy policy compliance parameter must be set, otherwise the map cannot be loaded, and must be set after the initial installation of the popover initialization, currently the country attaches great importance to personal privacy policy, Android application market audit has also increased the audit of personal privacy. At this point, the integration is almost complete and you can extend it according to your business needs. The official overlay only supports adding Bitmap types. You can’t add a custom control or layout like native.

/// Overlay icon
final BitmapDescriptor icon;
Copy the code

However, there is an official way to convert custom widgets into bitmaps by converting them into bitstreams.

/// Create a BitmapDescriptor based on the converted binary data of the PNG image
static BitmapDescriptor fromBytes(Uint8List byteData) {
  return BitmapDescriptor._(<dynamic> ['fromBytes', byteData]);
}
Copy the code

Idea: by RenderObjectToWidgetElement transform our Widget for the image, and then converts the image to a byte stream, so perfectly realize the needs of custom Maker. Note: Custom widgets that have Text components must be nested in Directionality and have a textDieecton attribute. This attribute represents the writing order, left to right, or right to left in some countries, so be aware of this.

child: Directionality(
    textDirection: TextDirection.ltr,
    child:child),
Copy the code

Source:

staticFuture<ByteData? > widgetToImage(Widget widget, {Alignment alignment = Alignment.center, Size size =const Size(double.maxFinite, double.maxFinite),
    double devicePixelRatio = 1.0.double pixelRatio = 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;
}
Copy the code

Conclusion: Scott map integration is very convenient, plug-in quality is stable, because I have not used the baidu and tencent is not good, but it is worth ridicule is now three major manufacturers joint in view of the enterprises account for licensing, 50000 / year, still no discount, as long as you are a corporate account, just can’t flow will charge you 1, 50000, This is really not good for the newly developed App and the traffic is not much ~~, maybe we will change the platform in the future, and then share the map scheme of other platforms ~~End