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

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%')
  }
}

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

了解更多详情>>

访问地图服务联盟官网

获取显示地图开发指导文档

获取 Poi搜索开发指导文档

获取点聚合开发指导文档

ITPub博客

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

开发步骤

地图显示

关键字搜索

点聚合

最新文章