场景介绍

本章节将向您介绍如何使用地图选点Button功能，开发者可调用Button组件拉起Map Kit的地图选点页面，用户在地图中选择位置后，位置相关信息返回Button界面。

说明

该场景暂不支持2in1设备。

前提条件

参见开发准备。

效果图展示

单击“地图选点”按钮拉起地图选点页面。

开发步骤

1. 导入Scenario Fusion Kit模块以及相关公共模块。
   1. import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
   2. import { hilog } from '@kit.PerformanceAnalysisKit';

2. 在容器中声明FunctionalButton，指定Button的openType，并设置对应的回调函数，代码如下：
   1. @Entry
   2. @Component
   3. struct Index {
   4. build() {
   5. Row() {
   6. Column() {
   7. // 声明FunctionalButton
   8. FunctionalButton({
   9. params: {
   10. // OpenType.CHOOSE_LOCATION表示Button为地图选点
   11. openType: functionalButtonComponentManager.OpenType.CHOOSE_LOCATION,
   12. label: '地图选点',
   13. // 调整Button样式
   14. styleOption: {
   15. bgColor: functionalButtonComponentManager.ColorType.DEFAULT,
   16. size: functionalButtonComponentManager.SizeType.DEFAULT,
   17. plain: false,
   18. disabled: false,
   19. loading: false,
   20. hoverClass: functionalButtonComponentManager.HoverClassType.HOVER_CLASS,
   21. hoverStartTime: 0,
   22. hoverStayTime: 0,
   23. styleConfig: new functionalButtonComponentManager.ButtonConfig()
   24. .fontSize(20)
   25. .fontColor(Color.Black)
   26. }
   27. },
   28. // OpenType为“CHOOSE_LOCATION”时，回调必须选择“onChooseLocation”
   29. controller: new functionalButtonComponentManager.FunctionalButtonController()
   30. .onChooseLocation((err, data) => {
   31. if (err) {
   32. // 错误日志处理
   33. hilog.error(0x0000, "testTag", "error： %{public}d %{public}s", err.code, err.message);
   34. return;
   35. }
   36. // 成功日志处理
   37. hilog.info(0x0000, "testTag", "succeeded in choosing location");
   38. let name: string = data.name;
   39. let address: string = data.address;
   40. let longitude: number = data.longitude;
   41. let latitude: number = data.latitude;
   42. })
   43. })
   44. }
   45. .width('100%')
   46. }
   47. .height('100%')
   48. }
   49. }

   说明

   • openType参数填写“functionalButtonComponentManager.OpenType.CHOOSE_LOCATION”指定Button为打开地图选点类型。
   • controller参数必须对应填写“new functionalButtonComponentManager.FunctionalButtonController().onChooseLocation”。

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