HarmonyOS NEXT 中级开发笔记：ArkTS 实现出行地图核心功能

// 地图标记点组件@Componentstruct MapMarker {  @Prop latitude: number // 纬度  @Prop longitude: number // 经度  @Prop title: string = '位置标记' // 默认标题    @State private isSelected: boolean = false    build() {    Column() {      Image(this.isSelected ? $r('app.media.marker_active') : $r('app.media.marker_normal'))        .width(40)        .height(40)        .onClick(() => {          this.isSelected = !this.isSelected        })      if (this.isSelected) {        Text(this.title)          .fontSize(12)          .margin({top: 4})      }    }    .position({x: this.longitude, y: this.latitude})  }}
// 地图容器使用示例@Entry@Componentstruct TravelMap {  private markers: Array<{lat: number, lng: number, name: string}> = [    {lat: 39.9042, lng: 116.4074, name: '北京'},    {lat: 31.2304, lng: 121.4737, name: '上海'}  ]
  build() {    Stack() {      // 基础地图层      Map()        .width('100%')        .height('100%')            // 动态渲染标记点      ForEach(this.markers, (item) => {        MapMarker({          latitude: item.lat,          longitude: item.lng,          title: item.name        })      })    }  }}