求提供适配flutter框架的HarmonyOS 鸿蒙Next高德地图demo

发布于 1周前 作者 itying888 来自 鸿蒙OS

求提供适配flutter框架的HarmonyOS 鸿蒙Next高德地图demo 求提供适配flutter框架的高德地图demo

2 回复

下载gitee上的platformview代码,链接:https://gitee.com/openharmony-sig/flutter_samples/tree/master/ohos/platform_demo

修改ohos工程目录下的CustomView.ets文件(在该文件里面实现高德地图组件的集成)

代码修改为:

/* 
* Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import MethodChannel, {
  MethodCallHandler,
  MethodResult
} from '@ohos/flutter_ohos/src/main/ets/plugin/common/MethodChannel';

import PlatformView, { Params } from '@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformView';

import common from '@ohos.app.ability.common';

import { BinaryMessenger } from '@ohos/flutter_ohos/src/main/ets/plugin/common/BinaryMessenger';

import StandardMethodCodec from '@ohos/flutter_ohos/src/main/ets/plugin/common/StandardMethodCodec';

import MethodCall from '@ohos/flutter_ohos/src/main/ets/plugin/common/MethodCall';

import {
  AMap,
  MapsInitializer,
  MapView,
  MapViewComponent,
  MapViewManager
} from '@amap/amap_lbs_map3d';

import { bundleManager } from '@kit.AbilityKit';

import { identifier } from '@kit.AdsKit';

import { hilog } from '@kit.PerformanceAnalysisKit';

import { BusinessError } from '@kit.BasicServicesKit';

@Component
struct ButtonComponent {
  @Prop params: Params
  customView: CustomView = this.params.platformView as CustomView
  @StorageLink('numValue') storageLink: string = "first"
  @State bkColor: Color = Color.Red
  @State oaid: string = '';

  aboutToAppear(): void {

    let flag = bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_SIGNATURE_INFO;

    let bundleInfo = bundleManager.getBundleInfoForSelfSync(flag)

    let appId = bundleInfo.signatureInfo.appId;

    console.log('yl test :' + appId)

    MapsInitializer.setDebugMode(true);

    // AMapLocationManagerImpl.setApiKey("9ac54bcb52273245aed11162b2b17f0f");

    //MapsInitializer.setApiKey("a3c171f002314aed8bb29020e32a1e27");
    MapsInitializer.setApiKey("你自己生成的key值");

    MapViewManager.getInstance().getMapView((mapview?: MapView) => {

      if (!mapview) {
        return;
      }

      let mapView: MapView = mapview;

      mapView.onCreate();

      mapView.getMapAsync((map) => {

        let aMap: AMap = map;

      })

    })

    try {

      identifier.getOAID().then((data) => {

        this.oaid = data;
        hilog.info(0x0000, 'testTag', '%{public}s', `get oaid by promise success, oaid: ${this.oaid}`);

      }).catch((err: BusinessError) => {

        hilog.error(0x0000, 'testTag', '%{public}s',
          `get oaid by promise failed, code: ${err.code}, message: ${err.message}`);

      })

    } catch (err) {

      hilog.error(0x0000, 'testTag', '%{public}s', `get oaid by promise catch error: ${err.code} ${err.message}`);

    }

  }

  build() {

    Row() {
      MapViewComponent()
        .width('100%')
        .height('100%')
    }
  }
}

@Builder
function ButtonBuilder(params: Params) {

  ButtonComponent({ params: params })
    .backgroundColor(Color.Yellow)
}

AppStorage.setOrCreate('numValue', 'test')

@Observed
export class CustomView extends PlatformView implements MethodCallHandler {
  numValue: string = "test";
  methodChannel: MethodChannel;
  index: number = 1;

  constructor(context: common.Context, viewId: number, args: ESObject, message: BinaryMessenger) {

    super();

    // 注册消息通道
    this.methodChannel =
      new MethodChannel(message, `com.rex.custom.ohos/customView${viewId}`, StandardMethodCodec.INSTANCE);

    this.methodChannel.setMethodCallHandler(this);

  }

  onMethodCall(call: MethodCall, result: MethodResult): void {

    // 接受Dart侧发来的消息
    let method: string = call.method;

    let link1: SubscribedAbstractProperty<number> = AppStorage.link('numValue');

    switch (method) {

      case 'getMessageFromFlutterView':

        let value: ESObject = call.args;

        this.numValue = value;
        link1.set(value)
        console.log("nodeController receive message from dart: " + this.numValue);
        result.success(true);
        break;

    }

  }

  public sendMessage = () => {

    console.log("nodeController sendMessage")
    //向Dart侧发送消息
    this.methodChannel.invokeMethod('getMessageFromOhosView', 'natvie - ' + this.index++);
  }

  getView(): WrappedBuilder<[Params]> {
    return new WrappedBuilder(ButtonBuilder);
  }

  dispose(): void {
  }
}

更多关于求提供适配flutter框架的HarmonyOS 鸿蒙Next高德地图demo的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


针对您提出的帖子标题“求提供适配flutter框架的HarmonyOS 鸿蒙Next高德地图demo”,以下是一个简短的回答:

HarmonyOS 鸿蒙Next平台上适配Flutter框架的高德地图demo,目前并未直接由官方或广泛社区提供现成的完整示例。然而,您可以通过以下步骤尝试自行集成:

  1. 获取Flutter插件:首先,确保您已安装并配置好Flutter开发环境。接着,搜索是否有适用于HarmonyOS的Flutter高德地图插件。由于HarmonyOS的特殊性,可能需要查找专为鸿蒙定制的插件或进行一定的适配工作。

  2. 集成高德地图SDK:若直接插件不可用,您可尝试将高德地图的HarmonyOS SDK与Flutter项目结合。这通常涉及在原生代码层面(如Dart与Java或JS的互操作接口,但注意您的要求中排除了Java)进行集成,并可能需要在Flutter侧创建相应的平台通道以调用原生功能。

  3. 参考官方文档:查阅高德地图官方文档以及HarmonyOS开发者文档,了解如何在鸿蒙平台上集成地图服务,并尝试结合Flutter的插件开发流程进行实现。

请注意,由于平台及技术的不断更新,具体实现细节可能会有所变化。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部