📢 重磅福利！参与活动赢好礼，马克杯、鼠标垫、贴纸、8月1日-12月31日等你来！

点击链接：   华为开发者学堂

场景介绍

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

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

实现思路

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

说明

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

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

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

约束与限制

• 本示例支持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。

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──common
3. │ │ └──Constants.ets // 常量文件
4. │ ├──entryability
5. │ │ └──EntryAbility.ets
6. │ ├──entrybackupability
7. │ │ └──EntryBackAbility.ets
8. │ ├──model
9. │ │ └──StationData.ets // mock数据
10. │ ├──pages
11. │ │ ├──GasStationPage.ets // 附近加油站页
12. │ │ └──MainPage.ets // 首页
13. │ └──utils
14. │ ├──CalculateUtil.ets // 计算位置工具类
15. │ ├──Logger.ets // 日志工具类
16. │ ├──MapUtil.ets // 地图工具类
17. │ └──PermissionsUtil.ets // 权限工具类
18. └──entry/src/main/resources // 应用资源目录

参考文档

Map Kit（地图服务）

MapComponent（地图组件）

标记

mapCommon（地图属性模型）

map（地图显示功能）

开发准备

配置调试签名

代码下载

附近加油站查询示例代码