一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して3日目です。クリックしてイベントの詳細をご覧ください。
現在、マップオープンプラットフォームの3つの巨人、AutoNavi、Baidu、Tencentは、基本的にFlutterプラグインの開発と統合をサポートしています。ここからも、Flutterのエコロジーが徐々に向上していることがわかります。以下では、AutoNaviマップをFlutterプロジェクトに統合する際のいくつかの手順と個人的な落とし穴を紹介します。
1. AutoNavi Mapsオープンプラットフォームに入り、キーを申請します。Android側は、リリースバージョンとデバッグバージョンのSHA1値を設定する必要があります。これは、AndroidStudioの組み込みツールから取得できます。クリックするとデバッグSHA1値を生成します。同じことがリリースバージョンにも当てはまります。
次に、SHA1値とパッケージ名を設定し、[送信]をクリックします。
iOSは比較的単純で、BundleIdを設定するだけで済みます。
2.ここでの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アプリケーション市場のレビューも個人のプライバシーに注意を払っています。監査の取り組みが強化されています。統合は基本的にここで完了しており、ビジネスニーズに応じて拡張できます。
3.カスタムMaker
公式オーバーレイの追加は、ビットマップタイプの追加のみをサポートし、ネイティブコントロールのようなカスタムコントロールまたはカスタムレイアウトを追加することはできません。
/// 覆盖物的图标
final BitmapDescriptor icon;
复制代码しかし、公式にはそのような方法があります。バイトストリーム変換を通じて、私のアイデアはカスタムウィジェットをバイトストリームに変換してからビットマップに変換することですよね？
/// 根据将PNG图片转换后的二进制数据[byteData]创建BitmapDescriptor
static BitmapDescriptor fromBytes(Uint8List byteData) {
return BitmapDescriptor._(<dynamic>['fromBytes', byteData]);
}
复制代码アイデア： RenderObjectToWidgetElementを使用してウィジェットを画像に変換してから、画像をバイトストリームに変換します。これは、カスタムメーカーのニーズを完全に満たしています。
注：カスタムウィジェットにテキストテキストコンポーネントがある場合は、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;
}
复制代码概要：
Gaodeマップの統合は非常に便利で、BaiduとTencentを使用したことがないため、プラグインの品質は比較的安定しています。比較するのは簡単ではありませんが、不満の1つは、3つの主要なものです。現在、メーカーが共同で法人口座に課金しています。企業認証料、年間5万円、割引なし、法人口座であれば、トラフィックがない場合でも1年間5万円が課金されますが、これは問題ありません。新しく開発されたアプリでトラフィックが少ない場合Ginkgo~~、将来的にプラットフォームを変更して、他のプラットフォームのマッププランを共有する可能性があります~~終了