请问在HarmonyOS鸿蒙Next下怎么开发类似于Keep运动健身app上的记录跑步路线的功能

地图页面的代码如下：

import {HMRouter, HMRouterMgr} from "@hadss/hmrouter"
import CommonConstants from '../common/Constants';
import { MapComponent, mapCommon, map } from '@kit.MapKit'
import { geoLocationManager } from '@kit.LocationKit'
import {MapUtil} from '../util/MapUtil'
import { AsyncCallback } from '@kit.BasicServicesKit';

@HMRouter({
  pageUrl: 'RecordMapPage',
})
@Entry
@Component
export struct RecordMapPage {
  @StorageLink('longitude') longitude: number = CommonConstants.LONGITUDE;
  @StorageLink('latitude') latitude: number = CommonConstants.LATITUDE;
  mapOption?: mapCommon.MapOptions = {
    position: {
      target: {
        latitude: this.latitude,
        longitude: this.longitude
      },
      zoom: CommonConstants.ZOOM
    },
    mapType: mapCommon.MapType.STANDARD
  };
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  private marker?: map.Marker;
  private mapPolyline?: map.MapPolyline;
  private myPosition?: mapCommon.LatLng;

  aboutToAppear(): void {
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        this.mapController?.setMyLocationEnabled(true);
        this.mapController?.setMyLocationControlsEnabled(true);
        let requestInfo: geoLocationManager.CurrentLocationRequest = {
          'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,
          'scenario': geoLocationManager.LocationRequestScenario.UNSET,
          'maxAccuracy': 0
        };
        let locationChange = async (): Promise<void> => {
        };
        geoLocationManager.on('locationChange', requestInfo, locationChange);
        geoLocationManager.getCurrentLocation(requestInfo).then(async (result) => {
          let mapPosition: mapCommon.LatLng =
            await map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, result);
          AppStorage.setOrCreate('longitude', mapPosition.longitude);
          AppStorage.setOrCreate('latitude', mapPosition.latitude);
          let cameraPosition: mapCommon.CameraPosition = {
            target: mapPosition,
            zoom: 15,
            tilt: 0,
            bearing: 0
          };
          let cameraUpdate = map.newCameraPosition(cameraPosition);
          mapController?.animateCamera(cameraUpdate, 1000);
        })

        this.mapController.on('mapClick', async (position) => {
          this.mapController?.clear();
          this.marker?.remove();
          let requestInfo: geoLocationManager.CurrentLocationRequest = {
            'priority': geoLocationManager.LocationRequestPriority.FIRST_FIX,
            'scenario': geoLocationManager.LocationRequestScenario.UNSET,
            'maxAccuracy': 0
          };
          let locationChange = async (location: geoLocationManager.Location): Promise<void> => {
            let wgs84Position: mapCommon.LatLng = {
              latitude: location.latitude,
              longitude: location.longitude
            };
            let gcj02Posion: mapCommon.LatLng =
              await map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02,
                wgs84Position);
            this.myPosition = gcj02Posion
          };
          geoLocationManager.on('locationChange', requestInfo, locationChange);

          this.marker = await MapUtil.addMarker(position, this.mapController);
          const walkingRoutes = await MapUtil.walkingRoutes(position, this.myPosition);
          await MapUtil.paintRoute(walkingRoutes!, this.mapPolyline, this.mapController);
        });
      }
    };
  }

  onPageHide(): void {
    this.mapController?.clear();
  }

  build() {
    Column(){
      MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback })
        .width('100%')
        .height('100%')
    }
  }
}

Log报错如下，好像看不出什么原因？