HarmonyOS 地图开发前准备

Map Kit开发准备可以参考文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/map-config-agc-V5

Map Kit会用到Location kit相关的准备可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/location-permission-guidelines-V5

下述一个使用的demo可供参考：

（在项目内使用地图组件，实现的效果：跳转到一个专门的页面，页面里只有一个地图组件，然后地图上显示我自己的当前地理位置）

先获取当前位置，在传入地图组件，使用地图组件需在module.json5中开启权限：

"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.
90.
91.