如何在应用中实现地图关键字搜索和标记聚合功能？
在如今的移动应用中，地图展示与标记功能已成为众多生活服务类应用的核心需求。无论是旅行类应用中的景点搜索与导航，还是共享类应用中的资源定位与管理，地图服务都扮演着至关重要的角色。以旅行类应用为例，用户可以通过地图快速搜索并浏览附近的景点信息，而共享单车类应用则能实时显示周边可用单车的分布情况，极大提升了用户体验。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) => {
if (!err) {
// 获取地图的控制器类，用来操作地图
this.mapController = mapController;
this.mapEventManager = this.mapController.getEventManager();
let callback = () => {
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) => {
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 < 100; index++){
array.push(clusterItem1)
}
for(let index = 0; index < 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搜索开发指导文档
获取点聚合开发指导文档
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]