鸿蒙ArkTS开发，使用高德api，自定义弹窗4级地址

 使用高德api。

使用自定义弹窗。

水平有限，只能做到这种程度了，有大神，能做到滑动选中，上下字体缩放效果的。麻烦给留一份~~

自定义弹窗代码：

import { lazyLoadAddress } from './Clien4JoinAddressRequest';

@CustomDialog
export default struct Client4JoinAddressDialogWidget {
  controller: CustomDialogController
  private scroller: Scroller = new Scroller()
  private scrollerForList: Scroller = new Scroller()
  @State provinceList: Array<Map<string, object>> = []; //省份
  @State cityList: Array<Map<string, object>> = []; //市
  @State countyList: Array<Map<string, object>> = []; //区
  @State areaList: Array<Map<string, object>> = []; //街道、县

  @State provinceArray: Array<string> = [];
  @State cityArray: Array<string> = [];
  @State countyArray: Array<string> = [];
  @State areaArray: Array<string> = [];
  @Link provinceChecked: string
  @Link cityChecked: string
  @Link countyChecked: string
  @Link areaChecked: string

  aboutToAppear() {
    //省份
    lazyLoadAddress()
      .then((nodes: Array<Map<string, object>>) => {
        // new ArrayList()
        this.provinceList = nodes;
        this.provinceList.forEach(item => {
          this.provinceArray.push(item.get("name").toString())
        })
        //市份
        lazyLoadAddress(this.provinceList[0])
          .then((nodes: Array<Map<string, object>>) => {
            this.cityList = nodes;
            nodes.forEach(item => {
              this.cityArray.push(item.get("name").toString())
            })

            //区
            lazyLoadAddress(this.cityList[0])
              .then((nodes: Array<Map<string, object>>) => {
                this.countyList = nodes;
                nodes.forEach(item => {
                  this.countyArray.push(item.get("name").toString())
                })

                //街道
                lazyLoadAddress(this.countyList[0])
                  .then((nodes: Array<Map<string, object>>) => {
                    this.areaList = nodes;
                    nodes.forEach(item => {
                      this.areaArray.push(item.get("name").toString())
                    })
                  }).catch((error: any) => {
                  console.error("Error occurred:", error);
                });

              }).catch((error: any) => {
              console.error("Error occurred:", error);
            });

          }).catch((error: any) => {
          console.error("Error occurred:", error);
        });
      }).catch((error: any) => {
      console.error("Error occurred:", error);
    });

   
  }

  build() {
    Column() {
      //取消和确定
      Row() {
        Text("取消区域").fontColor(Color.Gray)
          .fontColor(Color.Red)
          .margin({ right: px2vp(29) })
          .onClick(() => {
            this.provinceChecked = ""
            this.cityChecked = ""
            this.countyChecked = ""
            this.areaChecked = ""
            this.controller?.close();
          })
        Text("确定区域").fontColor(Color.Black).margin({ left: px2vp(29) })
          .onClick(() => {
            this.controller?.close();
          })
      }.width("100%")
      .margin({ top: px2vp(20) }).padding({ left: px2vp(29), right: px2vp(29) })
      .justifyContent(FlexAlign.SpaceBetween)

      Row() {
        this.pickerViewWidget({ provinces: this.provinceArray, type: this.provinceList })
        this.pickerViewWidget({ provinces: this.cityArray, type: this.cityList })
        this.pickerViewWidget({ provinces: this.countyArray, type: this.countyList })
        this.pickerViewWidget({ provinces: this.areaArray, type: this.areaList })
      }.padding({ top: px2vp(30) })
      .width("100%")
      .justifyContent(FlexAlign.SpaceAround)

    }
    .width("100%")
    .height(px2vp(720))
  }

  @Builder pickerViewWidget($$: {
    provinces: Array<string>,
    type: Array<Map<string, object>>
  }) {
    Scroll(this.scroller) {
      List({ space: px2vp(20), scroller: this.scrollerForList }) {
        ForEach($$.provinces, (item) => {
          ListItem() {
            Row() {
              Text(
                item
              )
                .fontSize(px2fp(46))
                .textAlign(TextAlign.Start)
                .backgroundColor(Color.White)
                .maxLines(1)
                .textOverflow({ overflow: TextOverflow.Clip })
                .onClick(() => {
                  const type = $$.type[0].get("label")
                  if (type + ''.trim() === 'province') {
                    for (let index = 0; index < $$.type.length; index++) {
                      if ($$.type[index].get("name") === item) {
                        this.getAddress($$.type[index])
                      }
                    }
                    this.provinceChecked = item;
                  } else if (type + ''.trim() === 'city') {

                    for (let index = 0; index < $$.type.length; index++) {
                      if ($$.type[index].get("name") === item) {
                        this.getAddress($$.type[index])
                      }
                    }
                    this.cityChecked = item;
                  }
                  else if (type + ''.trim() === 'district') {
                    for (let index = 0; index < $$.type.length; index++) {
                      if ($$.type[index].get("name") === item) {
                        this.getAddress($$.type[index])
                      }
                    }

                    this.countyChecked = item;
                  }
                  else if (type + ''.trim() === 'street') {
                    this.areaChecked = item;
                  }
                  // $$.provinceChose=item;
                })
              // Text(`provinces++${item.get("name")}`)
              // Text(`${$$.type[0].get("label")}`)
            }
          }
        }, item => item)
      }
    }
    .padding({ top: px2vp(30), bottom: px2vp(90) })
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
    .height("100%")
    // .backgroundColor(Color.Red)
    .width(px2vp(200))
  }

  getAddress(node?: Map<string, object>) {

    const type = node.get("label")

    if (type + ''.trim() === 'province') {
      //市份
      lazyLoadAddress(node)
        .then((nodes: Array<Map<string, object>>) => {
          this.cityList = nodes;
          this.cityArray = [];
          nodes.forEach(item => {
            this.cityArray.push(item.get("name").toString())
          })

        }).catch((error: any) => {
        console.error("Error occurred:", error);
      });


    } else if (type + ''.trim() === 'city') {
      //区
      lazyLoadAddress(node)
        .then((nodes: Array<Map<string, object>>) => {
          this.countyList = nodes;
          this.countyArray = [];
          nodes.forEach(item => {
            this.countyArray.push(item.get("name").toString())
          })

        }).catch((error: any) => {
        console.error("Error occurred:", error);
      });

    }
    else if (type + ''.trim() === 'district') {
      //街道
      lazyLoadAddress(node)
        .then((nodes: Array<Map<string, object>>) => {
          this.areaList = nodes;
          this.areaArray = [];
          nodes.forEach(item => {
            this.areaArray.push(item.get("name").toString())
          })
        }).catch((error: any) => {
        console.error("Error occurred:", error);
      });
    }
  }
}

使用页面：

@Component
export default struct ChangeMyDeviceInfoView {
  @State myDeviceListModelItem: MyDeviceListModelItem = router.getParams()['item']
  @State message: string = 'ChangeMyDeviceInfoView'
  @State provinceList: Array<String> = []
  @State provinceIndex: number = 0
  private clientName = ''
  private clientTel = '';
  private clientAddress = '';
  // private client4JoinAddress = '';
  private remark = '';
  controller: TextInputController = new TextInputController()
  @State provinceChecked: string = '北京市';
  @State cityChecked: string = '北京城区';
  @State countyChecked: string = '东城区';
  @State areaChecked: string = '体育馆路街道';

  // clien4JoinAddressDialog: CustomDialogController = new CustomDialogController({
  //   builder: Clien4JoinAddressDialogWidget({})
  // })

  private customDialogController =

    new CustomDialogController({
      builder: Client4JoinAddressDialogWidget(
        {
          provinceChecked: $provinceChecked,
          cityChecked: $cityChecked,
          countyChecked: $countyChecked,
          areaChecked: $areaChecked
        }
      ),
      alignment: DialogAlignment.Bottom,
      offset: { dx: 0, dy: px2vp(-30) }, // 弹窗相对alignment位置的偏移量
    })

  // selectedDate: Date = new Date("2010-1-1")

  build() {
    Column() {
      Button("测试")
        .margin(200)
        .onClick(() => {
          this.customDialogController.open()
          // DatePickerDialog.show({
          //   start: new Date("2000-1-1"),
          //   end: new Date("2100-12-31"),
          //   selected: this.selectedDate,
          //   lunar: true,
          //   onAccept: (value: DatePickerResult) => {
          //     this.selectedDate.setFullYear(value.year, value.month, value.day)
          //     console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
          //   },
          //   onCancel: () => {
          //     console.info("DatePickerDialog:onCancel()")
          //   },
          //   onChange: (value: DatePickerResult) => {
          //     console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
          //   }
          // })
        })

      Text(this.provinceChecked)
      Text(this.cityChecked)
      Text(this.countyChecked)
      Text(this.areaChecked)
}

效果：