【HarmonyOS Next】地图使用详解（二）

背景

上篇文章对开发环境初始化进行了讲解，这篇文章是对地图Picker系列组件的讲解。包括地点选取模块和地点详情展示模块。

地点选取模块（sceneMap.chooseLocation）

• 参数

参数名	类型	必填	说明
context	common.UIAbilityContext	是	UIAbility或UIExtensionAbility所对应的context。
options	LocationChoosingOptions	是	地点选取参数。

• 返回值

Promise

地点选取初始化参数（LocationChoosingOptions）

location

• 地图中心点坐标。如果参数未传，使用设备当前位置作为中心点；如果未获取到设备当前位置，默认以故宫博物院为中心点。

language

• 地图组件显示的语言。仅支持中文和英文，zh_CN和en

poiTypes

• 指定需要展示的poi类别。取值范围需要查看HwLocationType

searchEnabled

• 是否展示搜索控件，默认值为false。true：展示；false：不展示

showNearbyPoi

• 是否展示附近poi，默认值为false。true：展示；false：不展示

snapshotEnabled

• 是否返回映射快照，默认值为false。true：返回；false：不返回

地点选择返回值（LocationChoosingResult）

siteId

• 选择的地点ID，如果选测试非Poi（即手动滑动到随便某个位置），则不返回

location

• 选点的坐标点。返回mapCommon.Latlng值

name

• 选点的Poi名称。非Poi时，返回name值为标记点

address

• 选点的地址信息

addressComponent

• 选点地址的详细信息。返回site.AddressComponent值，包括国家名字，行政区，地区等信息。

zoom

• 选点地址的缩放层级。

snapshot

• 地图快照。返回图片类型

代码

  /**
   * 选择位置的ID值
   */
  public SelectLocationSiteId: string = '';  
  /**
   * 展示地点选取页
   */
  public async ShowChoosingLocation() {
    let locationChoosingOptions: sceneMap.LocationChoosingOptions = {
      // 地图中心点坐标
      location: { latitude: this.LocationLatitude, longitude: this.LocationLongitude },
      language: 'zh_cn',
      // 展示搜索控件
      searchEnabled: true,
      // 展示附近Poi
      showNearbyPoi: true
    };
    // 拉起地点选取页
    let result: sceneMap.LocationChoosingResult =
      await sceneMap.chooseLocation(getContext(this) as common.UIAbilityContext, locationChoosingOptions);
    let showString: string =
      `选择的地址名字为：${result.name},维度：${result.location.latitude},经度：${result.location.longitude}`;
    if (result.siteId) {
      this.SelectLocationSiteId = result.siteId;
    }
    if (result.name) {
      this.SelectLocationName = result.name;
    }
    this.LocationLatitude = result.location.latitude;
    this.LocationLongitude = result.location.longitude;
    console.info(showString);
    promptAction.showToast({
      message: showString
    })
  }

实现效果

地点详情展示模块（sceneMap.queryLocation）

由官方提供的地点详情展示模块，可以实现快速调用页面，查看地点详情。

• 参数

参数名	类型	必填	说明
context	common.UIAbilityContext	是	UIAbility或UIExtensionAbility所对应的context。
options	LocationQueryOptions	是	地点查询参数。

LocationQueryOptions（查询地点详情设置参数）

需要注意点，如果没有填写siteid参数时，需要同时填写location和name才能实现页面的定位

siteId

• 地点详情页的地点ID。

language

• 语言。当前仅支持中文和英文，取值：zh_CN、en。

location

• 地图中心点坐标。如果没有siteId，使用location查询地点详情。

name

• 地点的名称。如果没有siteId，使用name作为location的名称标注。

address

• 地点的地址。如果没有siteId，使用address作为location的地址标注。

showBusiness

• 是否显示商业信息（如打车），默认值为true。

代码

/**
 * 展示选取的详细地址信息
 */
public async ShowLocationComponentById() {
  if (this.SelectLocationSiteId && this.SelectLocationSiteId != '') {
    sceneMap.queryLocation(getContext(this) as common.UIAbilityContext, { siteId: this.SelectLocationSiteId })
  }
}

/**
 * 展示选取的详细地址信息
 */
public async ShowLocationComponentByName() {
  sceneMap.queryLocation(getContext(this) as common.UIAbilityContext, {
    location: {
      latitude: this.LocationLatitude,
      longitude: this.LocationLongitude
    },
    name: this.SelectLocationName
  })
}

实现效果

• 当选择的地址是Poi时，ID和Name都可以正常显示

• 当选择地址不是Poi时，ID是为undefined的，Name可以正常显示

总结

这里展示了官方提供的两种地图组件的使用方式，希望可以让你对这两个组件的使用有更深的理解