华为HarmonyOS地图服务 -- 如何实现地图呈现？-- HarmonyOS自学8

news2024/11/13 12:55:26

如何使用地图组件MapComponent和MapComponentController呈现地图，效果如下图所示。

MapComponent是地图组件，用于在您的页面中放置地图。
MapComponentController是地图组件的主要功能入口类，用来操作地图，与地图有关的所有方法从此处接入。它所承载的工作包括：地图类型切换（如标准地图、空地图）、改变地图状态（中心点坐标和缩放级别）、添加点标记（Marker）、绘制几何图形(MapPolyline、MapPolygon、MapCircle)、监听各类事件等。

开发步骤

地图显示

导入Map Kit相关模块。
1. import { MapComponent, mapCommon, map } from '@kit.MapKit';
2. import { AsyncCallback } from '@kit.BasicServicesKit';
新建地图初始化参数mapOption，设置地图中心点坐标及层级。
通过callback回调的方式获取MapComponentController对象，用来操作地图。

调用MapComponent组件，传入mapOption和callback参数，初始化地图。
```
@Entry
```
1. @Component
2. struct HuaweiMapDemo {
3. private TAG = "HuaweiMapDemo";
4. private mapOption?: mapCommon.MapOptions;
5. private callback?: AsyncCallback<map.MapComponentController>;
6. private mapController?: map.MapComponentController;
7. aboutToAppear(): void {
8. // 地图初始化参数，设置地图中心点坐标及层级
9. this.mapOption = {
10. position: {
11. target: {
12. latitude: 39.9,
13. longitude: 116.4
14. },
15. zoom: 10
16. }
17. };
18. // 地图初始化的回调
19. this.callback = async (err, mapController) => {
20. if (!err) {
21. // 获取地图的控制器类，用来操作地图
22. this.mapController = mapController;
23. this.mapController.on("mapLoad", () => {
24. console.info(this.TAG, `on-mapLoad`);
25. });
26. }
27. };
28. }
29. // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效
30. onPageShow(): void {
31. // 绘制地图页面的生命周期onPageShow，将地图切换到前台
32. if (this.mapController !== undefined) {
33. this.mapController.show();
34. }
35. }
36. // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效。
37. onPageHide(): void {
38. // 绘制地图页面的生命周期onPageHide，将地图切换到后台
39. if (this.mapController !== undefined) {
40. this.mapController.hide();
41. }}
42. build() {
43. Stack() {
44. // 调用MapComponent组件初始化地图
45. MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback }).width('100%').height('100%');
46. }.height('100%')
47. }
48. }
3. 运行您刚完成的工程就可以在您的APP中看到地图了，运行后的效果如下图所示。
如果没有成功加载地图，请参见无法加载地图。