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

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

一、進(jìn)入高德地圖開放平臺申請Key

Android端需要設(shè)置發(fā)布版本和調(diào)試版本SHA1值，這里可以通過AndroidStudio 自帶工具獲取，

點(diǎn)擊會生成調(diào)式SHA1值。發(fā)布版本同理。

接著我們設(shè)置完SHA1值和包名之后點(diǎn)擊提交即可。

iOS相對簡單，只需要設(shè)置BundleId即可。

二、yaml文件集成插件

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

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

這時(shí)我們已經(jīng)成功的將地圖功能集成到我們的Flutter項(xiàng)目中來了。 初始化：在我們需要的頁面添加AMapWidget控件，下面參數(shù)按自己需求調(diào)整，

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

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

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

/// 覆蓋物的圖標(biāo)
final BitmapDescriptor icon;

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

/// 根據(jù)將PNG圖片轉(zhuǎn)換后的二進(jìn)制數(shù)據(jù)[byteData]創(chuàng)建BitmapDescriptor
static BitmapDescriptor fromBytes(Uint8List byteData) {
  return BitmapDescriptor._(<dynamic>['fromBytes', byteData]);
}

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

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

到此，關(guān)于“Flutter怎么集成高德地圖并添加自定義Maker”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！