Flutter集成高德地圖并添加自定義Maker的實(shí)踐

更新時(shí)間：2022年04月07日 09:00:18 作者：老李code

本文主要介紹了Flutter集成高德地圖并添加自定義Maker的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(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;
}

總結(jié)：高德地圖的集成還是非常方便的，插件質(zhì)量也還算穩(wěn)定，因?yàn)槲覜]有用過百度和騰訊的也不好做比較，但是有一點(diǎn)值得吐槽的是現(xiàn)在三大廠商聯(lián)合針對企業(yè)賬號收取企業(yè)授權(quán)費(fèi)，5萬/年，還不打折，只要你是企業(yè)賬號，就是沒流量也要收你1年5萬，這點(diǎn)真的對于新開發(fā)的App并且流量不多的情況下非常的不銀杏~~ ，以后也許會更換平臺，到時(shí)候再分享其他平臺的地圖方案

到此這篇關(guān)于Flutter集成高德地圖并添加自定義Maker的實(shí)踐的文章就介紹到這了,更多相關(guān)Flutter集成高德地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: