HarmonyOS Next应用开发实战——最优充电站页面实现（part2）

3. 地图标记与相机移动

提供了在地图上增加标记点和移动相机到指定位置的功能，方便用户查看特定地点。

// 移动到坐标点并标记
mapCameraPosition(location: mapCommon.LatLng, siteId?: string) {
  let zoom = 20;
  let cameraUpdate = map.newLatLng(location, zoom);
  // 以动画方式移动地图相机
  this.mapController?.animateCamera(cameraUpdate, 1000);
  this.addMapMaker(location, siteId)
}

// 地图上增加标记点
addMapMaker(location: mapCommon.LatLng, siteId?: string) {
  this.mapController?.clear();
  let markerOptions: mapCommon.MarkerOptions = {
    position: location,
    rotation: 0,
    visible: true,
    zIndex: 0,
    alpha: 1,
    anchorU: 0.5,
    anchorV: 1,
    clickable: true,
    draggable: true,
    flat: false,
    title: siteId,
  };
  // 创建Marker
  this.mapController?.addMarker(markerOptions);
}

4. 获取当前位置

通过 geoLocationManager.getCurrentLocation 方法获取用户的当前位置，并将地图相机移动到该位置，同时获取当前位置的地址信息。

// 获取当前位置并视图移动过去
getMyLocation() {
  geoLocationManager.getCurrentLocation().then(async (result) => {
    let position: geoLocationManager.Location = {
      'latitude': result.latitude,
      'longitude': result.longitude,
      'altitude': 0,
      'accuracy': 0,
      'speed': 0,
      'timeStamp': 0,
      'direction': 0,
      'timeSinceBoot': 0,
      altitudeAccuracy: 0,
      speedAccuracy: 0,
      directionAccuracy: 0,
      uncertaintyOfTimeSinceBoot: 0,
      sourceType: geoLocationManager.LocationSourceType.GNSS
    };

    this.mapController?.setMyLocation(position);
    // 创建CameraUpdate对象
    let gcj02Posion: mapCommon.LatLng = await this.convertCoordinate(result.latitude, result.longitude)
    let latLng: mapCommon.LatLng = {
      latitude: gcj02Posion.latitude,
      longitude: gcj02Posion.longitude
    };
    let zoom = 15;
    let cameraUpdate = map.newLatLng(latLng, zoom);
    // 以动画方式移动地图相机
    this.mapController?.animateCamera(cameraUpdate, 1000);

    // 获取当前位置的地址，填入附近推荐前面。
    let reverseGeocodeRequest: geoLocationManager.ReverseGeoCodeRequest = {
      'latitude': result.latitude,
      'longitude': result.longitude,
      'maxItems': 1
    };
    try {
      geoLocationManager.getAddressesFromLocation(reverseGeocodeRequest, (err, data) => {
        if (err) {
          // ...
        } else {
          if (data && data[0] && data[0].administrativeArea && data[0].placeName) {
            this.addressName = data[0]?.placeName.split(data[0]?.administrativeArea)[1];
          }
        }
      });
    } catch (err) {
      // ...
    }
  })
}

5. 半模态框展示充电站列表

在页面底部使用半模态框展示充电站列表，为用户提供充电站的相关信息。

Row() {
  // 半模态框
  SheetTransition({
    StationList: Station.getStationList(),
    addressName: this.addressName
  })
}.margin({ bottom: 220 })

通过以上核心功能的实现，开发者可以在HarmonyOS Next应用中创建一个功能丰富的最优充电站页面。