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

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

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

开发步骤

地图显示

导入Map Kit相关模块。

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
新建地图初始化参数mapOptions，设置地图中心点坐标及层级。

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

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

复制代码

@Entry
@Component
struct 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
@Component
struct 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%')
}
}

这里仅展示用到的主要代码及功能，具体代码可参见地图服务官网。

了解更多详情>>