鸿蒙 地图Picker控件

   开发中，除了自研地图组件，还可以使用系统提供的地图Picker控件，快速集成地点详情展示、地点选取、区划选择等功能，无需自行开发复杂的地图页面。

一、地图Picker

Map Kit提供以下三种地图Picker控件：

限制

三种控件均仅支持手机、平板和2in1设备。

二、地点详情展示控件

该控件提供便捷的地点详情展示功能以及导航和打车服务入口，无需自行开发地图页面，即可实现用户点击“路线”按钮启动导航，或点击“打车”按钮发起打车。

接口说明

开发步骤

导入模块

import { sceneMap } from '@kit.MapKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit';

方式一：传入siteId

let queryLocationOptions: sceneMap.LocationQueryOptions = {
siteId: "922207154068557824"
};

sceneMap.queryLocation(this.getUIContext().getHostContext() as common.UIAbilityContext, queryLocationOptions)
.then(() => {
console.info("Succeeded in querying location.");
})
.catch((err: BusinessError) => {
console.error(`Failed to query Location, code: ${err.code}, message: ${err.message}`);
});

方式二：传入location和name

let queryLocationOptions: sceneMap.LocationQueryOptions = {
location: {
latitude: 39.9175,
longitude: 116.3972
},
name: '故宫博物院'
};

sceneMap.queryLocation(this.getUIContext().getHostContext() as common.UIAbilityContext, queryLocationOptions)
.then(() => {
console.info("Succeeded in querying location.");
})
.catch((err: BusinessError) => {
console.error(`Failed to query Location, code: ${err.code}, message: ${err.message}`);
});

LocationQueryOptions参数：

三、地点选取控件

集成地点选取控件，无需自己开发地图页面，可快速实现地点选取的能力。该控件不支持在智能表设备中调用。

接口说明

开发步骤

let locationChoosingOptions: sceneMap.LocationChoosingOptions = {
location: {
latitude: 39.91804051376904,
longitude: 116.3970536796932
},
searchEnabled: true, // 展示搜索控件
showNearbyPoi: true // 展示附近POI
};

sceneMap.chooseLocation(this.getUIContext().getHostContext() as common.UIAbilityContext, locationChoosingOptions)
.then((data) => {
console.info("Succeeded in choosing location.");
})
.catch((err: BusinessError) => {
console.error(`Failed to choose location, code: ${err.code}, message: ${err.message}`);
});

LocationChoosingOptions参数：

四、区划选择控件（6.1.1+）

区划选择控件可加载全球或指定国家的区划信息，支持以树状结构化选择。该控件不支持在Wearable设备中调用。

支持功能：

• 支持查看选中区划的下级区划

• 支持推荐热门区划

• 支持子窗拉起区划控件，适合宽屏设备使用

接口说明

开发步骤

let districtSelectOptions: sceneMap.DistrictSelectOptions = {
countryCode: "CN", // 国家代码
subWindowEnabled: true, // 使用子窗拉起方式
maxAdminLevel: 3 // 区划选择控件的最大显示层级
};

sceneMap.selectDistrict(this.getUIContext().getHostContext(), districtSelectOptions)
.then((data) => {
console.info("Succeeded in selecting district.");
})
.catch((err: BusinessError) => {
console.error(`Failed to select district, code: ${err.code}, message: ${err.message}`);
});

DistrictSelectOptions参数：

五、三种控件对比