提供一个关于地图组件使用的小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" 
} 
} 
]
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

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; 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.