日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter集成高德地圖并添加自定義Maker的實踐_Android

作者：老李code ? 更新時間： 2022-06-08 編程語言

目前地圖開放平臺三大巨頭：高德、百度、騰訊基本都支持Flutter插件開發集成。從這里也能看出Flutter的生態在逐漸的完善。下面介紹下在Flutter項目集成高德地圖的一些步驟和個人踩得一些坑。

一、進入高德地圖開放平臺申請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.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._(['fromBytes', byteData]);
}

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

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

源碼：

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

總結：高德地圖的集成還是非常方便的，插件質量也還算穩定，因為我沒有用過百度和騰訊的也不好做比較，但是有一點值得吐槽的是現在三大廠商聯合針對企業賬號收取企業授權費，5萬/年，還不打折，只要你是企業賬號，就是沒流量也要收你1年5萬，這點真的對于新開發的App并且流量不多的情況下非常的不銀杏~~ ，以后也許會更換平臺，到時候再分享其他平臺的地圖方案

原文鏈接：https://juejin.cn/post/7083413148006350856

欄目分類
最近更新