Flutter怎么集成高德地圖并添加自定義Maker

這篇文章主要介紹“Flutter怎么集成高德地圖并添加自定義Maker”，在日常操作中，相信很多人在Flutter怎么集成高德地圖并添加自定義Maker問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Flutter怎么集成高德地圖并添加自定義Maker”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、進入高德地圖開放平臺申請Key

Android端需要設置發布版本和調試版本SHA1值，這里可以通過AndroidStudio 自帶工具獲取，

點擊會生成調式SHA1值。發布版本同理。

接著我們設置完SHA1值和包名之后點擊提交即可。

iOS相對簡單，只需要設置BundleId即可。

二、yaml文件集成插件

這里我用的3.0.0版本，（定位功能看個人需求集成）。

# 高德地圖、定位
amap_flutter_location: ^3.0.0
amap_flutter_map: ^3.0.0

這時我們已經成功的將地圖功能集成到我們的Flutter項目中來了。 初始化：在我們需要的頁面添加AMapWidget控件，下面參數按自己需求調整，

AMapWidget(
  mapType: MapType.navi,// 地圖類型
  // customStyleOptions: CustomStyleOptions(
  //   true,
  //   styleData: styleData,
  //   styleExtraData: styleExtraData,
  // ),// 離線地圖 按需添加
  onTap: widget.onTap,// 地圖點擊事件
  rotateGesturesEnabled: false,//旋轉手勢
  tiltGesturesEnabled: false,//傾斜手勢
  scaleEnabled: false,//平移滾動
  // 隱私政策合規
  privacyStatement: AMapPrivacyStatement(
      hasContains: true, hasShow: true, hasAgree: true),
  apiKey: GdMap.aMapApiKey,// 雙端Key值初始化
  onMapCreated: onMapCreated,// 創建成功回調
  markers: Set<Marker>.of(_initMarkerMap.values),// 自定義添加標記物
  // onLocationChanged: (m) {
  //   print("位置回調---${m.accuracy}");
  //   print("位置回調精度---${m.latLng.latitude}");
  //   print("位置回調偉度---${m.latLng.longitude}");
  // },
  onCameraMoveEnd: (pos) {
    //縮放級別
    var zoom = pos.zoom;
    this.zoom = zoom;

    mapCenter =
        LatLng(pos.target.latitude, pos.target.longitude); // 更新中心點
    if (isLoad) {
      // 添加maker
      loadMakers(pos.target.latitude, pos.target.longitude);
    }
  },
),

特別注意：隱私政策合規這個參數必須要設置，否則地圖加載不出來，并且一定要設置在首次安裝啟動彈窗之后初始化，目前國家對于個人隱私政策非常重視，Android應用市場的審核也對個人隱私加大了審核力度。到這里集成基本已經完成了，大家可以根據自己的業務需求來進行擴展。
三、添加自定義Maker
官方覆蓋物只支持添加Bitmap類型,并不可以像原生那樣添加一個自定義控件或者自定義布局，

/// 覆蓋物的圖標
final BitmapDescriptor icon;

但是官方有一個這樣的方法：通過字節流轉換，我的思路是將自定義Widget轉換為字節流再轉換為bitmap不就可以了嗎？

/// 根據將PNG圖片轉換后的二進制數據[byteData]創建BitmapDescriptor
static BitmapDescriptor fromBytes(Uint8List byteData) {
  return BitmapDescriptor._(<dynamic>['fromBytes', byteData]);
}

思路： 通過RenderObjectToWidgetElement 將我們的Widget轉換為image，再將image轉換為字節流，這樣就完美實現了自定義Maker的需求。
注意： 自定義Widget如果有文本Text組件的話必須加入Directionality嵌套并加上textDieecton屬性，這個屬性是代表書寫順序，從左到右，有些國家是從右到左，所以這塊需要注意。

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

源碼：

static Future<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;
}

到此，關于“Flutter怎么集成高德地圖并添加自定義Maker”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！