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

技术分享 9个月前 (06-18) 0 999+

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

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

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

了解更多详情>>

发表评论