HarmonyOS5 汽车类行业实践 - 附近加油站查询（二）

附近加油站查询是汽车类应用的典型场景之一，如用户需要加油时，可查询周边加油站的地址、距离等信息。本示例基于Map Kit的与Marker实现地图服务并标记附近加油站位置，从而筛选定位附近的加油站，也适用于充电桩查询。

Amay_W

1843人浏览 · 2025-08-08 15:51:56

Amay_W · 2025-08-08 15:51:56 发布

场景介绍

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

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

效果预览

实现思路

获取位置权限，并获取当前位置。
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. }
设置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. }
使用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. }