提供一个关于地图组件使用的小demo

"requestPermissions": [ 
{ 
  "name": "ohos.permission.LOCATION", 
"reason": "$string:EntryAbility_desc", 
"usedScene": { 
  "abilities": [ 
  "EntryAbility" 
  ], 
  "when": "always" 
} 
}, 
{ 
  "name": "ohos.permission.APPROXIMATELY_LOCATION", 
"reason": "$string:EntryAbility_desc", 
"usedScene": { 
  "abilities": [ 
  "EntryAbility" 
  ], 
  "when": "always" 
} 
} 
]

import { map, mapCommon, MapComponent } from '@kit.MapKit'; 
import { AsyncCallback } from '@kit.BasicServicesKit'; 
import { geoLocationManager } from '@kit.LocationKit'; 
import { router } from '@kit.ArkUI'; 
 
@Entry 
@Component 
struct MapSignIn { 
  private mapOption?: mapCommon.MapOptions; 
  private callback?: AsyncCallback<map.MapComponentController>; 
  private mapController?: map.MapComponentController; 
 
  aboutToAppear(): void { 
    // 地图初始化的回调 
    this.callback = async (err, mapController) => { 
      if (!err) { 
        // 获取地图的控制器类，用来操作地图 
        this.mapController = mapController; 
        // 启用我的位置图层 
        this.mapController?.setMyLocationEnabled(true); 
        this.mapController.on("mapLoad", () => { 
          console.info('MapCreatePage', `on-mapLoad`); 
        }); 
 
        // 监听“我的位置”按钮点击事件 
        this.mapController.on("myLocationButtonClick", () => { 
          console.info("myLocationButtonClick", `myLocationButtonClick`); 
          this.getMyLocation() 
        }); 
 
        // 初始化我的位置 
        this.getMyLocation() 
      } 
    }; 
  } 
 
  build() { 
    Column() { 
      Row() { 
        Image($r('app.media.ic_public_arrow_left')).width(28) 
          .onClick(() => { 
            router.back() 
          }) 
        Text('当前位置') 
      } 
      .height('6%') 
      .width('100%') 
      .padding({ left: 15 }) 
 
      MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback }).width('100%').height('94%'); 
    } 
  } 
  // 获取当前位置并视图移动过去 
  getMyLocation() { 
    geoLocationManager.getCurrentLocation().then(async (result) => { 
      console.log('MapSignIn', 'getMyLocation = ' + JSON.stringify(result)) 
      let position: geoLocationManager.Location = { 
        "latitude": result.latitude, 
        "longitude": result.longitude, 
        "altitude": 0, 
        "accuracy": 0, 
        "speed": 0, 
        "timeStamp": 0, 
        "direction": 0, 
        "timeSinceBoot": 0 
      }; 
 
      this.mapController?.setMyLocation(position); 
      // 创建CameraUpdate对象 
      let gcj02Posion: mapCommon.LatLng = await this.convertCoordinate(result.latitude,result.longitude) 
      let latLng: mapCommon.LatLng = { 
        latitude: gcj02Posion.latitude, 
        longitude: gcj02Posion.longitude 
      }; 
      let zoom = 17; 
      let cameraUpdate = map.newLatLng(latLng, zoom); 
      // 以动画方式移动地图相机 
      this.mapController?.animateCamera(cameraUpdate, 1000); 
    }) 
  } 
  async convertCoordinate(latitude: number, longitude: number): Promise<mapCommon.LatLng> { 
    let wgs84Position: mapCommon.LatLng = { 
      latitude: latitude, 
      longitude: longitude 
    }; 
    let gcj02Posion: mapCommon.LatLng = await map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, wgs84Position); 
    return gcj02Posion; 
  } 
}