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

一、地图Picker

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

控件	功能	版本要求
地点详情展示	地点详情展示、导航服务入口、打车服务入口	-
地点选取	地图选点、地点搜索	-
区划选择	国家/省市树状选择、热门区划推荐	6.1.1(24)+

限制

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

二、地点详情展示控件

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

接口说明

接口	描述
LocationQueryOptions	查询地点详情的参数
queryLocation(context, options)	查询地点详情

开发步骤

导入模块

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参数：

参数	类型	说明
siteId	string	地点ID（与location二选一）
location	LatLng	地点经纬度（与siteId二选一）
name	string	地点名称

三、地点选取控件

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

接口说明

接口	描述
LocationChoosingOptions	地点选取的参数
chooseLocation(context, options)	地点选取
LocationChoosingResult	地点选取的返回结果

开发步骤

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参数：

参数	类型	说明
location	LatLng	地图中心点坐标（可选）
searchEnabled	boolean	是否展示搜索控件
showNearbyPoi	boolean	是否展示附近POI

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

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

支持功能：

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

• 支持推荐热门区划

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

接口说明

接口	描述
DistrictSelectOptions	区划选择页面初始选项
selectDistrict(context, options)	调出区划选择页面
DistrictSelectResult	区划选择结果

开发步骤

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参数：

参数	类型	说明
countryCode	string	国家代码（如"CN"）
subWindowEnabled	boolean	是否使用子窗拉起方式
maxAdminLevel	number	区划选择控件的最大显示层级（6.1.1+）

五、三种控件对比

控件	接口	核心参数	返回结果	适用场景
地点详情展示	queryLocation	siteId 或 location+name	void	展示地点详情、导航、打车入口
地点选取	chooseLocation	location、searchEnabled、showNearbyPoi	LocationChoosingResult	用户选择地点
区划选择	selectDistrict	countryCode、subWindowEnabled、maxAdminLevel	DistrictSelectResult	选择国家/省市