📢 重磅福利！参与活动赢好礼，8月1日-12月31日等你来！
点击链接： 华为开发者学堂

场景介绍

附近加油站查询是汽车类应用的典型场景之一，如用户需要加油时，可查询周边加油站的地址、距离等信息。

本示例基于Map Kit的MapComponent与Marker实现地图服务并标记附近加油站位置，从而筛选定位附近的加油站，也适用于充电桩查询。

实现思路
获取位置权限，并获取当前位置。

export class PermissionsUtil {
  requestPermissions(permissions: Array<Permissions>): void {
    let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(getContext() as common.UIAbilityContext, permissions)
      .then((data: PermissionRequestResult) => {
        geoLocationManager.getCurrentLocation()
      })
      .catch((err: BusinessError) => {...})
  }
}
设置Marker属性，使用addMarker方法在地图上添加标记。
async addMapMaker(latitude: number, longitude: number, mapController: map.MapComponentController): Promise<void> {
    let markerOptions: mapCommon.MarkerOptions = {
      position: {
        latitude: latitude,
        longitude: longitude
      },
      ......
    };
    // Add Marker
    await mapController.addMarker(markerOptions)
}
使用on('markerClick')监听标记点击事件，点击时通过setAnimation实现标记图片放大效果。同时通过animateCamera移动地图相机到指定加油站位置。
this.mapController = mapController
// Enable my location layer
this.mapController.setMyLocationEnabled(true);
// Listen to the "Marker" click event
this.mapController.on('markerClick', (marker) => {
  this.isShow = true
  marker.setInfoWindowVisible(true)
  this.curMarker = marker
  this.imageScale = 1.5
  mapUtil.imageAnimation(marker, this.imageScale)
  // Move the map camera to the specified gas station location
  mapUtil.moveToCurrentPosition(marker.getPosition().latitude, marker.getPosition().longitude, mapController)
})
public moveToCurrentPosition(latitude: number, longitude: number, mapController: map.MapComponentController): void {
  // Creat CameraUpdate object
  let cameraPosition: mapCommon.CameraPosition = {
    target: {
      latitude: latitude,
      longitude: longitude,
    },
    zoom: 15.9
  }
  let cameraUpdate: map.CameraUpdate = map.newCameraPosition(cameraPosition)
  // Move camera
  mapController?.animateCamera(cameraUpdate, 500)
}

说明

本示例中的地点数据均为mock数据，如果需要获取现实门店地址，请联网查询；测试结果与自定义的数据值相关，仅供参考。

本示例需要开通地图服务，并进行相应配置，具体步骤如下：

登录AppGallery Connect网站，选择“我的项目”。
在项目列表中找到您的项目，在项目下的应用列表中选择需要打开“地图服务”的应用。
选择API管理，找到“地图服务”开关，打开开关。
确认已经开启“地图服务”开放能力，并完成手动签名。
签名完成后，项目即可正常使用。

约束与限制

本示例支持API Version 17 Release及以上版本。
本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。
权限说明
使用Internet网络权限：ohos.permission.INTERNET。
获取设备模糊位置信息权限：ohos.permission.APPROXIMATELY_LOCATION。
获取设备位置信息权限：ohos.permission.LOCATION。
工程目录

├──entry/src/main/ets                        // 代码区
│  ├──common
│  │  └──Constants.ets                       // 常量文件
│  ├──entryability
│  │  └──EntryAbility.ets
│  ├──entrybackupability
│  │  └──EntryBackAbility.ets
│  ├──model
│  │  └──StationData.ets                     // mock数据 
│  ├──pages
│  │  ├──GasStationPage.ets                  // 附近加油站页  
│  │  └──MainPage.ets                        // 首页   
│  └──utils 
│     ├──CalculateUtil.ets                   // 计算位置工具类
│     ├──Logger.ets                          // 日志工具类
│     ├──MapUtil.ets                         // 地图工具类 
│     └──PermissionsUtil.ets                 // 权限工具类      
└──entry/src/main/resources                  // 应用资源目录