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

2025-06-17
贵州
本文字数：3254 字
阅读完需：约 11 分钟

在如今的移动应用中，地图展示与标记功能已成为众多生活服务类应用的核心需求。无论是旅行类应用中的景点搜索与导航，还是共享类应用中的资源定位与管理，地图服务都扮演着至关重要的角色。以旅行类应用为例，用户可以通过地图快速搜索并浏览附近的景点信息，而共享单车类应用则能实时显示周边可用单车的分布情况，极大提升了用户体验。

HarmonyOS SDK 为开发者提供了强大的地图服务能力，支持从地图绘制到标记点展示的全流程功能。通过其位置搜索与聚合标记技术，开发者可以轻松实现基于不同比例尺的标记点聚合，从而优化地图展示效果。本文将详细介绍如何利用地图服务的关键字搜索能力，实现附近服务的搜索与地图标记展示功能，为旅行、共享等场景提供高效的地图解决方案。

开发步骤

地图显示

导入 Map Kit 相关模块。

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

复制代码

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

通过 callback 回调的方式获取 MapComponentController 对象，用来操作地图。

调用 MapComponent 组件，传入 mapOptions 和 callback 参数，初始化地图。

@Entry@Componentstruct HuaweiMapDemo {  private TAG = "HuaweiMapDemo";  private mapOptions?: mapCommon.MapOptions;  private callback?: AsyncCallback<map.mapcomponentcontroller>;  private mapController?: map.MapComponentController;  private mapEventManager?: map.MapEventManager;
  aboutToAppear(): void {    // 地图初始化参数，设置地图中心点坐标及层级    this.mapOptions = {      position: {        target: {          latitude: 39.9,          longitude: 116.4        },        zoom: 10      }    };
    // 地图初始化的回调    this.callback = async (err, mapController) =&gt; {      if (!err) {        // 获取地图的控制器类，用来操作地图        this.mapController = mapController;        this.mapEventManager = this.mapController.getEventManager();        let callback = () =&gt; {          console.info(this.TAG, `on-mapLoad`);        }        this.mapEventManager.on("mapLoad", callback);      }    };  }
  // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效  onPageShow(): void {    // 将地图切换到前台    if (this.mapController) {      this.mapController.show();    }  }
  // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效  onPageHide(): void {    // 将地图切换到后台    if (this.mapController) {      this.mapController.hide();    }  }
  build() {    Stack() {      // 调用MapComponent组件初始化地图      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');    }.height('100%')  }}

复制代码

关键字搜索

导入相关模块。

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

复制代码

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

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

复制代码

点聚合

导入相关模块。

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

复制代码

新增聚合图层。

@Entry@Componentstruct ClusterOverlayDemo {  private mapOptions?: mapCommon.MapOptions;  private mapController?: map.MapComponentController;  private callback?: AsyncCallback<map.mapcomponentcontroller>;
  aboutToAppear(): void {    this.mapOptions = {      position: {        target: {          latitude: 31.98,          longitude: 118.7        },        zoom: 7      }    }
    this.callback = async (err, mapController) =&gt; {      if (!err) {        this.mapController = mapController;        // 生成待聚合点        let clusterItem1: mapCommon.ClusterItem = {          position: {            latitude: 31.98,            longitude: 118.7          }        };        let clusterItem2: mapCommon.ClusterItem = {          position: {            latitude: 32.99,            longitude: 118.9          }        };        let clusterItem3: mapCommon.ClusterItem = {          position: {            latitude: 31.5,            longitude: 118.7          }        };        let clusterItem4: mapCommon.ClusterItem = {          position: {            latitude: 30,            longitude: 118.7          }        };        let clusterItem5: mapCommon.ClusterItem = {          position: {            latitude: 29.98,            longitude: 117.7          }        };        let clusterItem6: mapCommon.ClusterItem = {          position: {            latitude: 31.98,            longitude: 120.7          }        };        let clusterItem7: mapCommon.ClusterItem = {          position: {            latitude: 25.98,            longitude: 119.7          }        };        let clusterItem8: mapCommon.ClusterItem = {          position: {            latitude: 30.98,            longitude: 110.7          }        };        let clusterItem9: mapCommon.ClusterItem = {          position: {            latitude: 30.98,            longitude: 115.7          }        };        let clusterItem10: mapCommon.ClusterItem = {          position: {            latitude: 28.98,            longitude: 122.7          }        };        let array: Array<mapcommon.clusteritem> = [          clusterItem1,          clusterItem2,          clusterItem3,          clusterItem4,          clusterItem5,          clusterItem6,          clusterItem7,          clusterItem8,          clusterItem9,          clusterItem10        ]        for(let index = 0; index &lt; 100; index++){          array.push(clusterItem1)        }        for(let index = 0; index &lt; 10; index++){          array.push(clusterItem2)        }        // 生成聚合图层的入参 聚合distance设置为100vp        let clusterOverlayParams: mapCommon.ClusterOverlayParams = { distance: 100, clusterItems: array };        // 调用addClusterOverlay生成聚合图层        let clusterOverlay: map.ClusterOverlay = await this.mapController.addClusterOverlay(clusterOverlayParams);      }    }  }
  build() {    Stack() {      Column() {        MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })          .width('100%')          .height('100%');      }.width('100%')    }.height('100%')  }}