从零搭建企业网站手机网站主页面文艺

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

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

开发步骤

地图显示

1. 导入Map Kit相关模块。

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

2. 新建地图初始化参数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%')}
}

关键字搜索

1. 导入相关模块。

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

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

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.");

点聚合

1. 导入相关模块。

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

2. 新增聚合图层。

@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设置为100vplet 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搜索开发指导文档

获取点聚合开发指导文档