HarmonyOS 鸿蒙Next 地图组件MapComponent如何实现状态刷新并刷新大头针坐标

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 地图组件MapComponent如何实现状态刷新并刷新大头针坐标 地图组件MapComponent,我通过改变mapOptions的经纬度去驱动状态刷新,发现未生效,地图的大头针位置没用更新; MapComponent如何实现状态刷新,有没有方案?

import { mapCommon } from '@kit.MapKit'
import { MapComponent } from '@hms.core.map.MapComponent';
import map from '@hms.core.map.map';
import { AsyncCallback } from '@ohos.base';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  private marker?: map.Marker
  @State mapOption: mapCommon.MapOptions | undefined = undefined;
  // 定位的图标
  private callback?: AsyncCallback<map.MapComponentController> ;
  private mapController?: map.MapComponentController;

  // 经度
  @State posX: number = 31.1232132
  // 纬度
  @State posY: number = 117.2323232

  mapSetting() {
    // 地图初始化参数,设置地图中心点坐标及层级
    this.mapOption = {
      position: {
        target: {
          latitude: this.posX,
          longitude: this.posY,
        },
        zoom: 11
      },
      mapType: mapCommon.MapType.STANDARD,
      zoomControlsEnabled: true,
      scrollGesturesEnabled: true,
      zoomGesturesEnabled: true,
      scaleControlsEnabled: true,
    }
    // 地图初始化的回调
    if (this.callback === undefined){
      this.callback = async (err, mapController) => {
        if (!err) {
          mapController.setCompassControlsEnabled(true)
          // 启用我的位置图层
          /*    mapController.setMyLocationEnabled(true);
              // 启用我的位置按钮
              mapController.setMyLocationControlsEnabled(true);*/
          mapController.setScaleControlsEnabled(true)
          // 获取地图的控制器类,用来操作地图
          this.mapController = mapController;
          // 
          this.setBranchLocation()

        }
      }
    }
  }

  aboutToAppear(): void {
    this.mapSetting()
    //延迟更新经纬度
    setTimeout(() => {
      this.posX = 32.3939344
      this.posY = 119.32432432
      this.mapSetting()
      this.setBranchLocation()
    },10000)
  }

  async setBranchLocation() {
    // Marker初始化参数
    let markerOptions: mapCommon.MarkerOptions = {
      position: {
        latitude: this.posX,
        longitude: this.posY
      },
      rotation: 0,
      visible: true,
      zIndex: 0,
      alpha: 1,
      anchorU: 0.5,
      anchorV: 1,
      clickable: true,
      draggable: true,
      flat: false,
      // 图标存放在resources/rawfile,icon参数传入rawfile文件夹下的相对路径
      icon: 'point.png',
      // 给这个marker赋名字
      title: '',
      snippet: ''
    };
    // 创建Marker
    this.marker = await this.mapController!.addMarker(markerOptions);
    // 设置标记锚点
    this.marker.setMarkerAnchor(1.0, 1.0);
  }

  build() {
    Column() {
      Text(this.message)
        .id('地图刷新')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)
        .margin({top:50,left:15,right:15})


      MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback })
        .margin({left:20,right:20})
        .layoutWeight(1)

    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 地图组件MapComponent如何实现状态刷新并刷新大头针坐标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在延迟方法里增加移动相机

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/map-map-V5#section141021341974

setTimeout(()=>{
  this.posX = 32.3939344
  this.posY = 119.32432432
  this.mapSetting()
  this.setBranchLocation()

  let target: mapCommon.LatLng = {
    latitude:this.posX,
    longitude: this.posY
  };

  let cameraPosition: mapCommon.CameraPosition = {
    target: target,
    zoom: 10
  };
  // 新建CameraUpdate对象
  let cameraUpdate: map.CameraUpdate = map.newCameraPosition(cameraPosition);
  // 移动相机
  this.mapController.moveCamera(cameraUpdate);
},10000)

更多关于HarmonyOS 鸿蒙Next 地图组件MapComponent如何实现状态刷新并刷新大头针坐标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,实现地图组件MapComponent的状态刷新及大头针(Marker)坐标刷新,可以通过以下步骤完成:

  1. 获取MapComponent实例:首先,确保你的布局文件中已经添加了MapComponent,并在代码中通过findComponentById获取其实例。

  2. 设置地图状态监听:可以通过设置地图的特定监听器(如位置变化监听器、地图加载完成监听器等)来感知地图状态的变化。当这些状态变化时,触发相应的刷新逻辑。

  3. 更新Marker坐标:当需要刷新大头针坐标时,首先获取当前所有的Marker,然后更新它们的经纬度信息。如果Marker是动态添加的,也可以在添加时直接设置新的坐标。

  4. 刷新地图显示:在更新Marker坐标后,调用MapComponent的刷新方法(如invalidate()或类似的API,具体需参考HarmonyOS官方文档),以强制地图组件重新绘制,从而显示最新的Marker位置。

请注意,以上步骤是基于HarmonyOS的API设计逻辑进行的概述,具体实现时需参考最新的HarmonyOS开发文档和API指南。如果在实际开发中遇到问题,可能是API调用不当或版本差异导致,请详细检查代码和官方文档。

如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html

回到顶部