地图选点Button

场景介绍

地图选点Button功能可以帮助开发者调用Button组件拉起Map Kit的地图选点页面，用户在地图中选择位置后，位置相关信息返回Button页面。

运行示例代码单击“地图选点”按钮拉起地图选点页面。

约束与限制

地图选点Button支持Phone和Tablet设备，并且从5.0.1（13）版本开始，新增支持2in1设备。

前提条件

参见开发准备。

开发步骤

1. 导入Scenario Fusion Kit模块以及相关公共模块。

   import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
   import { hilog } from '@kit.PerformanceAnalysisKit';

2. 在容器中声明FunctionalButton，指定Button的openType，并设置对应的回调函数，代码如下：

   @Entry
   @Component
   struct Index {
     build() {
       Row() {
         Column() {
           // 构建FunctionalButton组件实例。
           FunctionalButton({
             params: {
               // OpenType.CHOOSE_LOCATION表示该按钮用于在地图上选择位置。
               openType: functionalButtonComponentManager.OpenType.CHOOSE_LOCATION,
               label: '地图选点',
               // 调整按钮样式。
               styleOption: {
                 bgColor: functionalButtonComponentManager.ColorType.DEFAULT,
                 size: functionalButtonComponentManager.SizeType.DEFAULT,
                 plain: false,
                 disabled: false,
                 loading: false,
                 hoverClass: functionalButtonComponentManager.HoverClassType.HOVER_CLASS,
                 hoverStartTime: 0,
                 hoverStayTime: 0,
                 styleConfig: new functionalButtonComponentManager.ButtonConfig()
                   .fontSize(20)
               },
             },
             // 当OpenType设置为CHOOSE_LOCATION时，回调必须为onChooseLocation。
             controller: new functionalButtonComponentManager.FunctionalButtonController()
               .onChooseLocation((err, data) => {
                 if (err) {
                   // 错误日志处理。
                   hilog.error(0x0000, "testTag", "error: %{public}d %{public}s", err.code, err.message);
                   return;
                 }
                 // 成功日志处理。
                 hilog.info(0x0000, "testTag", "succeeded in choosing location");
                 let name: string = data.name;
                 let address: string = data.address;
                 let longitude: number = data.longitude;
                 let latitude: number = data.latitude;
               })
           })
         }
         .width('100%')
       }
       .height('100%')
     }
   }

   

   • openType参数填写"functionalButtonComponentManager.OpenType.CHOOSE_LOCATION"指定Button为打开地图选点类型。
   • controller参数必须对应填写"new functionalButtonComponentManager.FunctionalButtonController().onChooseLocation"。
   • 可使用自定义Modifier设置按钮样式，参考示例。

   其他参数请参考：FunctionalButton（Button组件）。