如何在应用中实现地图关键字搜索和标记聚合功能？

在如今的移动应用中，地图展示与标记功能已成为众多生活服务类应用的核心需求。无论是旅行类应用中的景点搜索与导航，还是共享类应用中的资源定位与管理，地图服务都扮演着至关重要的角色。以旅行类应用为例，用户可以通过地图快速搜索并浏览附近的景点信息，而共享单车类应用则能实时显示周边可用单车的分布情况，极大提升了用户体验。
HarmonyOS SDK为开发者提供了强大的地图服务能力，支持从地图绘制到标记点展示的全流程功能。通过其位置搜索与聚合标记技术，开发者可以轻松实现基于不同比例尺的标记点聚合，从而优化地图展示效果。本文将详细介绍如何利用地图服务的关键字搜索能力，实现附近服务的搜索与地图标记展示功能，为旅行、共享等场景提供高效的地图解决方案。
开发步骤

地图显示

• 导入Map Kit相关模块。
  

1. import { MapComponent, mapCommon, map } from '@kit.MapKit';
2. import { AsyncCallback } from '@kit.BasicServicesKit';

复制代码

• 新建地图初始化参数mapOptions，设置地图中心点坐标及层级。
  

通过callback回调的方式获取MapComponentController对象，用来操作地图。
调用MapComponent组件，传入mapOptions和callback参数，初始化地图。

1. @Entry
2. @Component
3. struct HuaweiMapDemo {
4.   private TAG = "HuaweiMapDemo";
5.   private mapOptions?: mapCommon.MapOptions;
6.   private callback?: AsyncCallback<map.mapcomponentcontroller>;
7.   private mapController?: map.MapComponentController;
8.   private mapEventManager?: map.MapEventManager;
10.   aboutToAppear(): void {
11.     // 地图初始化参数，设置地图中心点坐标及层级
12.     this.mapOptions = {
13.       position: {
14.         target: {
15.           latitude: 39.9,
16.           longitude: 116.4
17.         },
18.         zoom: 10
19.       }
20.     };
22.     // 地图初始化的回调
23.     this.callback = async (err, mapController) => {
24.       if (!err) {
25.         // 获取地图的控制器类，用来操作地图
26.         this.mapController = mapController;
27.         this.mapEventManager = this.mapController.getEventManager();
28.         let callback = () => {
29.           console.info(this.TAG, `on-mapLoad`);
30.         }
31.         this.mapEventManager.on("mapLoad", callback);
32.       }
33.     };
34.   }
36.   // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效
37.   onPageShow(): void {
38.     // 将地图切换到前台
39.     if (this.mapController) {
40.       this.mapController.show();
41.     }
42.   }
44.   // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效
45.   onPageHide(): void {
46.     // 将地图切换到后台
47.     if (this.mapController) {
48.       this.mapController.hide();
49.     }
50.   }
52.   build() {
53.     Stack() {
54.       // 调用MapComponent组件初始化地图
55.       MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');
56.     }.height('100%')
57.   }
58. }

复制代码

关键字搜索

• 导入相关模块。
  

1. import { site } from '@kit.MapKit';

复制代码

• 通过指定的关键字和可选的地理范围，查询诸如旅游景点、企业和学校之类的地点。
  

1. let params: site.SearchByTextParams = {
2.   // 指定关键字
3.   query: "Piazzale Dante, 41, 55049 Viareggio, Tuscany, Italy",
4.   // 经纬度坐标
5.   location: {
6.     latitude: 31.984,
7.     longitude: 118.76625
8.   },
9.   // 指定地理位置的范围半径
10.   radius: 10000,
11.   language: "en"
12. };
13. // 返回关键字搜索结果
14. const result = await site.searchByText(params);
15. console.info("Succeeded in searching by text.");

复制代码

点聚合

• 导入相关模块。
  

1. import { map, mapCommon, MapComponent } from '@kit.MapKit';
2. import { AsyncCallback } from '@kit.BasicServicesKit';

复制代码

• 新增聚合图层。
  

1. @Entry
2. @Component
3. struct ClusterOverlayDemo {
4.   private mapOptions?: mapCommon.MapOptions;
5.   private mapController?: map.MapComponentController;
6.   private callback?: AsyncCallback<map.mapcomponentcontroller>;
8.   aboutToAppear(): void {
9.     this.mapOptions = {
10.       position: {
11.         target: {
12.           latitude: 31.98,
13.           longitude: 118.7
14.         },
15.         zoom: 7
16.       }
17.     }
19.     this.callback = async (err, mapController) => {
20.       if (!err) {
21.         this.mapController = mapController;
22.         // 生成待聚合点
23.         let clusterItem1: mapCommon.ClusterItem = {
24.           position: {
25.             latitude: 31.98,
26.             longitude: 118.7
27.           }
28.         };
29.         let clusterItem2: mapCommon.ClusterItem = {
30.           position: {
31.             latitude: 32.99,
32.             longitude: 118.9
33.           }
34.         };
35.         let clusterItem3: mapCommon.ClusterItem = {
36.           position: {
37.             latitude: 31.5,
38.             longitude: 118.7
39.           }
40.         };
41.         let clusterItem4: mapCommon.ClusterItem = {
42.           position: {
43.             latitude: 30,
44.             longitude: 118.7
45.           }
46.         };
47.         let clusterItem5: mapCommon.ClusterItem = {
48.           position: {
49.             latitude: 29.98,
50.             longitude: 117.7
51.           }
52.         };
53.         let clusterItem6: mapCommon.ClusterItem = {
54.           position: {
55.             latitude: 31.98,
56.             longitude: 120.7
57.           }
58.         };
59.         let clusterItem7: mapCommon.ClusterItem = {
60.           position: {
61.             latitude: 25.98,
62.             longitude: 119.7
63.           }
64.         };
65.         let clusterItem8: mapCommon.ClusterItem = {
66.           position: {
67.             latitude: 30.98,
68.             longitude: 110.7
69.           }
70.         };
71.         let clusterItem9: mapCommon.ClusterItem = {
72.           position: {
73.             latitude: 30.98,
74.             longitude: 115.7
75.           }
76.         };
77.         let clusterItem10: mapCommon.ClusterItem = {
78.           position: {
79.             latitude: 28.98,
80.             longitude: 122.7
81.           }
82.         };
83.         let array: Array<mapcommon.clusteritem> = [
84.           clusterItem1,
85.           clusterItem2,
86.           clusterItem3,
87.           clusterItem4,
88.           clusterItem5,
89.           clusterItem6,
90.           clusterItem7,
91.           clusterItem8,
92.           clusterItem9,
93.           clusterItem10
94.         ]
95.         for(let index = 0; index < 100; index++){
96.           array.push(clusterItem1)
97.         }
98.         for(let index = 0; index < 10; index++){
99.           array.push(clusterItem2)
100.         }
101.         // 生成聚合图层的入参 聚合distance设置为100vp
102.         let clusterOverlayParams: mapCommon.ClusterOverlayParams = { distance: 100, clusterItems: array };
103.         // 调用addClusterOverlay生成聚合图层
104.         let clusterOverlay: map.ClusterOverlay = await this.mapController.addClusterOverlay(clusterOverlayParams);
105.       }
106.     }
107.   }
109.   build() {
110.     Stack() {
111.       Column() {
112.         MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
113.           .width('100%')
114.           .height('100%');
115.       }.width('100%')
116.     }.height('100%')
117.   }
118. }

复制代码

这里仅展示用到的主要代码及功能，具体代码可参见地图服务官网。
了解更多详情>>
访问地图服务联盟官网
获取显示地图开发指导文档
获取Poi搜索开发指导文档
获取点聚合开发指导文档

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！