【HarmonyOS Next】地图使用详解（一）

news/2025/2/24 13:13:52

背景

这系列文章主要讲解鸿蒙地图的使用，当前可以免费使用，并提供了丰富的SDK给开发者去自定义控件开发。目前可以实现个性化显示地图、位置搜索和路径规划等功能，轻松完成地图构建工作。需要注意的是，现在测试只能使用实体手机去做调试，模拟器和预览器是没有办法做测试和使用的。

地图开发环境搭建

1. AGC中创建项目

在AGC中新建项目，并复制AGC项目中的Client ID 填写到工程中的entry模块的module.json5文件中，新增metadata，配置name为client_id，value为AGC项目中的Client ID。

请添加图片描述

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "2in1"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:layered_image",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "extensionAbilities": [
      {
        "name": "EntryBackupAbility",
        "srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets",
        "type": "backup",
        "exported": false,
        "metadata": [
          {
            "name": "ohos.extension.backup",
            "resource": "$profile:backup_config"
          }
        ],
      }
    ],
    "metadata": [
      {
        "name": "client_id",
        "value": "6917564776665168777"
      }
    ]
  }
}

2.AGC中开通地图服务

在API管理界面，打开地图服务

在这里插入图片描述

3.AGC中创建APP

在证书、APP ID和Profile中，APP ID中创建之前项目中的App

4.在项目文件中生成密钥请求文件

这个密钥文件比较重要，务必妥善保存。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这里的Alias需要记住，后面需要用到
在这里插入图片描述

保存csr文件

在这里插入图片描述

查看生成的csr文件

在这里插入图片描述

5.AGC项目中创建证书和设备

新建调试证书，并把证书下载到本地。

在这里插入图片描述

在这里插入图片描述

6.AGC项目中创建Profile

选择对应的调试证书，完成Profile的创建

在这里插入图片描述

在这里插入图片描述

7.把生成的证书和调试文件添加到项目结构中

在这里插入图片描述

在这里插入图片描述

8.确保当前IDE已经登陆了你的华为账号

在这里插入图片描述

地图组件（MapComponent）

  • 示例代码使用MVVM架构来配置

1、MapComponent组件初始化

  • 提供了两个必填参数，mapOptions和mapCallback
属性名称属性类型属性备注是否必填
mapOptionsmapCommon.MapOptions初始化参数，提供了地图类型、相机位置、地图边界等属性是
mapCallbackAsyncCallback<map.MapComponentController>地图主要功能类map.MapComponentController的回调函数，提供了地图各种操作的API是
  • 项目初始化框架
import { MapViewModel } from '../ViewModels/MapViewModel';
import { MapComponent } from '@kit.MapKit';

@Entry
@ComponentV2
struct FirstPage {
  @Local MapVM: MapViewModel = new MapViewModel();

  aboutToAppear(): void {
    this.MapVM.Init();
  }

  build() {
    RelativeContainer() {
      MapComponent({
        mapOptions: this.MapVM.MapOption,
        mapCallback: this.MapVM.MapCallBack
      })
        .width("100%")
        .height("100%")
        .id("Map")
    }
    .height('100%')
    .width('100%')
  }
}
  • VM中的MapOption赋值
this.MapOption = {
  //相机位置
  position: {
    target: {
      latitude: this.LocationLatitude,
      longitude: this.LocationLongitude
    },
    zoom: 10
  },
  //地图类型
  mapType: mapCommon.MapType.STANDARD,
  //地图最小图层,默认值为2
  minZoom: 2,
  //地图最大图层,默认值为20
  maxZoom: 20,
  //是否支持旋转手势
  rotateGesturesEnabled: true,
  //是否支持滑动手势
  scrollGesturesEnabled: true,
  //是否支持缩放手势
  zoomGesturesEnabled: true,
  //是否支持倾斜手势
  tiltGesturesEnabled: true,
  //是否展示缩放控件
  zoomControlsEnabled: true,
  //是否展示定位按钮
  myLocationControlsEnabled: true,
  //是否展示指南针控件
  compassControlsEnabled: false,
  //是否展示比例尺
  scaleControlsEnabled: true,
  //是否一直显示比例尺，只有比例尺启用时该参数才生效。
  alwaysShowScaleEnabled: true
};
  • VM中的MapCallBack赋值
this.MapCallBack = async (err, mapController) => {
  if (!err) {
    this.MapController = mapController;
    //启用我的位置图层
    mapController.setMyLocationEnabled(true);
    //设置我的位置跟随设备移动
    mapController.setMyLocationStyle({
      displayType: mapCommon.MyLocationDisplayType.LOCATE
    })
    //启用我的位置按钮
    mapController.setMyLocationControlsEnabled(true);
    //地图监听时间管理器
    this.MapEventManager = this.MapController.getEventManager();
  }
}
  • 权限申请（在VM中封装申请）
/**
 * 所需要得权限
 */
MapPermissions: Permissions[] =
  [
    'ohos.permission.INTERNET',
    'ohos.permission.LOCATION',
    'ohos.permission.APPROXIMATELY_LOCATION'
  ]

/**
 * 初始化方法
 */
public async Init() {
  //识别权限是否赋予
  if (!PermissionUtils.CheckPermissions(this.MapPermissions)) {
    const perResult: boolean = await PermissionUtils.RequestPermissions(this.MapPermissions);
    if (!perResult) {
      return;
    }
  }
}

权限方法封装

import { abilityAccessCtrl, bundleManager, common, Permissions } from '@kit.AbilityKit';

/**
 *权限封装类
 */
export class PermissionUtils {
  /**
   * 检查权限是否授权(完全授权)
   * @param permissionsArr 权限集合
   * @returns true：已经全部授权；false：没有全部授权
   */
  public static CheckPermissions(permissionsArr: Permissions[]): boolean {
    const atManager = abilityAccessCtrl.createAtManager();
    //获取bundle信息
    const bundleInfo =
      bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
    // 拿到当前应用的tokenID 标识
    const tokenID = bundleInfo.appInfo.accessTokenId
    //校验应用是否被授予权限
    let result: boolean = true;
    permissionsArr.forEach((x: Permissions, index: number) => {
      if (!(atManager.checkAccessTokenSync(tokenID, x) === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED)) {
        result = false;
        return;
      }
    })
    return result;
  }

  /**
   * 申请授权（首次弹窗申请）
   * @param permissionList 权限集合
   * @returns true：权限完全加载；false：有权限没有加载
   */
  public static async RequestPermissions(permissionList: Permissions[]): Promise<boolean> {
    // 程序访问控制管理
    const atManager = abilityAccessCtrl.createAtManager();
    // 拉起弹框请求用户授权
    const grantStatus = await atManager.requestPermissionsFromUser(getContext(), permissionList)
    // 获取请求权限的结果
    const isAuth = grantStatus.authResults.every(v => v === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED)
    // 返回 Promise 授权结果
    return isAuth ? Promise.resolve(true) : Promise.reject(false)
  }

  /**
   * 打开系统设置的权限管理页面
   */
  public static OpenPermissionSettingsPage() {
    // 获取上下文
    const context = getContext() as common.UIAbilityContext
    // 获取包信息
    const bundleInfo = bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION)
    // 打开系统设置页
    context.startAbility({
      bundleName: 'com.huawei.hmos.settings',
      abilityName: 'com.huawei.hmos.settings.MainAbility',
      uri: 'application_info_entry',
      parameters: {
        // 按照包名打开对应设置页
        pushParams: bundleInfo.name
      }
    })
  }
}
  • 项目加载时，先进行VM的初始化
aboutToAppear(): void {
  this.MapVM.Init();
}
  • 界面初始化展示

在这里插入图片描述

2、地图初始化类（MapOptions）

属于mapCommon类

  • 常用属性
名称类型可选说明
mapTypeMapType是地图类型，默认值为MapType.STANDARD，异常值按默认值处理。
positionCameraPosition否地图相机位置。
boundsLatLngBounds是地图展示边界，异常值根据无边界处理。说明西南角纬度不能大于东北角纬度。
minZoomnumber是地图最小图层，有效范围：[2, 20]，默认值为2，异常值按默认值处理。如果设置的最小缩放级别小于2，minZoom会取2。
maxZoomnumber是地图最大图层，有效范围：[2, 20]，默认值为20，异常值按默认值处理。如果设置的最大缩放级别大于20，maxZoom会取20。
rotateGesturesEnabledboolean是是否支持旋转手势，默认值为true，异常值按默认值处理。true：支持false：不支持
scrollGesturesEnabledboolean是是否支持滑动手势，默认值为true，异常值按默认值处理。true：支持false：不支持
zoomGesturesEnabledboolean是是否支持缩放手势，默认值为true，异常值按默认值处理。true：支持false：不支持
tiltGesturesEnabledboolean是是否支持倾斜手势，默认值为true，异常值按默认值处理。true：支持false：不支持
zoomControlsEnabledboolean是是否展示缩放控件，默认值为true，异常值按默认值处理。true：展示false：不展示
myLocationControlsEnabledboolean是是否展示定位按钮，默认值为false，异常值按默认值处理。true：展示false：不展示
compassControlsEnabledboolean是是否展示指南针控件，默认值为true，异常值按默认值处理。true：展示false：不展示
scaleControlsEnabledboolean是是否展示比例尺，默认值为false，异常值按默认值处理。true：展示false：不展示
paddingPadding是设置地图和边界的距离，默认值为{ left: 0 , top: 0 , right: 0 , bottom: 0 }。
styleIdstring是自定义样式ID。
dayNightModeDayNightMode是日间夜间模式，默认值为DayNightMode.DAY（日间模式）
alwaysShowScaleEnabledboolean是是否一直显示比例尺，只有比例尺启用时该参数才生效。
  • 在VM类中，需要在类初始化的时候把MapOption初始化。
constructor() {
  this.MapOption = {
    //相机位置
    position: {
      target: {
        latitude: this.LocationLatitude,
        longitude: this.LocationLongitude
      },
      zoom: 10
    },
    //地图类型
    mapType: mapCommon.MapType.STANDARD,
    //地图最小图层,默认值为2
    minZoom: 2,
    //地图最大图层,默认值为20
    maxZoom: 20,
    //是否支持旋转手势
    rotateGesturesEnabled: true,
    //是否支持滑动手势
    scrollGesturesEnabled: true,
    //是否支持缩放手势
    zoomGesturesEnabled: true,
    //是否支持倾斜手势
    tiltGesturesEnabled: true,
    //是否展示缩放控件
    zoomControlsEnabled: true,
    //是否展示定位按钮
    myLocationControlsEnabled: true,
    //是否展示指南针控件
    compassControlsEnabled: false,
    //是否展示比例尺
    scaleControlsEnabled: true,
    //是否一直显示比例尺，只有比例尺启用时该参数才生效。
    alwaysShowScaleEnabled: true
  };
  this.MapCallBack = async (err, mapController) => {
    if (!err) {
      this.MapController = mapController;
      //启用我的位置图层
      mapController.setMyLocationEnabled(true);
      //设置我的位置跟随设备移动
      mapController.setMyLocationStyle({
        displayType: mapCommon.MyLocationDisplayType.LOCATE
      })
      //启用我的位置按钮
      mapController.setMyLocationControlsEnabled(true);
      //地图监听时间管理器
      this.MapEventManager = this.MapController.getEventManager();
    }
  }
}

3、获取手机用户当前位置

通过geoLocationManager的getCurrentLocation方法，获取用户的坐标经纬度，然后封装成更新用户定位的方法，在初始化的时候调用，就可以实现手机打开后会直接更新到用户的位置

/**
 * 更新用户定位
 */
public async UpdateLocation() {
  // 获取用户位置坐标
  let location: geoLocationManager.Location = await geoLocationManager.getCurrentLocation();
  this.LocationLongitude = location.longitude;
  this.LocationLatitude = location.latitude;
}

完整代码

  • Page
import { MapViewModel } from '../ViewModels/MapViewModel';
import { MapComponent } from '@kit.MapKit';

@Entry
@ComponentV2
struct FirstPage {
  @Local MapVM: MapViewModel = new MapViewModel();

  aboutToAppear(): void {
    this.MapVM.Init();
  }

  build() {
    RelativeContainer() {
      MapComponent({
        mapOptions: this.MapVM.MapOption,
        mapCallback: this.MapVM.MapCallBack
      })
        .width("100%")
        .height("100%")
        .id("Map")
    }
    .height('100%')
    .width('100%')
  }
}
  • ViewModel
import { mapCommon, map, sceneMap } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
import { common, Permissions } from '@kit.AbilityKit';
import { PermissionUtils } from '../Utils/PermissionUtils';
import geoLocationManager from '@ohos.geoLocationManager';
import { image } from '@kit.ImageKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';
import { MapMarkImage } from '../Utils/MapMarkImage';

@ObservedV2
export class MapViewModel {
  /**
   * 地图初始化参数设置
   */
  MapOption?: mapCommon.MapOptions
  /**
   * 地图回调方法
   */
  MapCallBack?: AsyncCallback<map.MapComponentController>
  /**
   * 地图控制器
   */
  MapController?: map.MapComponentController
  /**
   * 地图监听管理器
   */
  MapEventManager?: map.MapEventManager
  /**
   * 地图标记集合
   */
  Markers: map.Marker[] = []
  /**
   * 所需要得权限
   */
  MapPermissions: Permissions[] =
    [
      'ohos.permission.INTERNET',
      'ohos.permission.LOCATION',
      'ohos.permission.APPROXIMATELY_LOCATION'
    ]
  /**
   * 当前位置的维度
   */
  public LocationLatitude: number = 39.9;
  /**
   * 当前位置的经度
   */
  public LocationLongitude: number = 116.4;

  /**
   * 初始化方法
   */
  public async Init() {
    //识别权限是否赋予
    if (!PermissionUtils.CheckPermissions(this.MapPermissions)) {
      const perResult: boolean = await PermissionUtils.RequestPermissions(this.MapPermissions);
      if (!perResult) {
        return;
      }
    }
    //标点初始化
    MapMarkImage.Init(getContext(this));
  }

  constructor() {
    this.UpdateLocation();
    this.MapOption = {
      //相机位置
      position: {
        target: {
          latitude: this.LocationLatitude,
          longitude: this.LocationLongitude
        },
        zoom: 10
      },
      //地图类型
      mapType: mapCommon.MapType.STANDARD,
      //地图最小图层,默认值为2
      minZoom: 2,
      //地图最大图层,默认值为20
      maxZoom: 20,
      //是否支持旋转手势
      rotateGesturesEnabled: true,
      //是否支持滑动手势
      scrollGesturesEnabled: true,
      //是否支持缩放手势
      zoomGesturesEnabled: true,
      //是否支持倾斜手势
      tiltGesturesEnabled: true,
      //是否展示缩放控件
      zoomControlsEnabled: true,
      //是否展示定位按钮
      myLocationControlsEnabled: true,
      //是否展示指南针控件
      compassControlsEnabled: false,
      //是否展示比例尺
      scaleControlsEnabled: true,
      //是否一直显示比例尺，只有比例尺启用时该参数才生效。
      alwaysShowScaleEnabled: true
    };
    this.MapCallBack = async (err, mapController) => {
      if (!err) {
        this.MapController = mapController;
        //启用我的位置图层
        mapController.setMyLocationEnabled(true);
        //设置我的位置跟随设备移动
        mapController.setMyLocationStyle({
          displayType: mapCommon.MyLocationDisplayType.LOCATE
        })
        //启用我的位置按钮
        mapController.setMyLocationControlsEnabled(true);
        //地图监听时间管理器
        this.MapEventManager = this.MapController.getEventManager();
      }
    }
  }

  /**
   * 更新用户定位
   */
  public async UpdateLocation() {
    // 获取用户位置坐标
    let location: geoLocationManager.Location = await geoLocationManager.getCurrentLocation();
    this.LocationLongitude = location.longitude;
    this.LocationLatitude = location.latitude;
  }

  /**
   * 移动视图相机
   * @param latitude 维度
   * @param longitude 经度
   */
  public async MoveCamera(latitude: number, longitude: number) {
    if (this.MapController) {
      //将视图移动到标点位置
      let nwPosition = map.newCameraPosition({
        target: {
          latitude: latitude,
          longitude: longitude
        },
        zoom: 10
      })
      // 以动画方式移动地图相机
      this.MapController.animateCamera(nwPosition, 1000);
    }
  }
}
  • PermissionUtils
import { abilityAccessCtrl, bundleManager, common, Permissions } from '@kit.AbilityKit';

/**
 *权限封装类
 */
export class PermissionUtils {
  /**
   * 检查权限是否授权(完全授权)
   * @param permissionsArr 权限集合
   * @returns true：已经全部授权；false：没有全部授权
   */
  public static CheckPermissions(permissionsArr: Permissions[]): boolean {
    const atManager = abilityAccessCtrl.createAtManager();
    //获取bundle信息
    const bundleInfo =
      bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
    // 拿到当前应用的tokenID 标识
    const tokenID = bundleInfo.appInfo.accessTokenId
    //校验应用是否被授予权限
    let result: boolean = true;
    permissionsArr.forEach((x: Permissions, index: number) => {
      if (!(atManager.checkAccessTokenSync(tokenID, x) === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED)) {
        result = false;
        return;
      }
    })
    return result;
  }

  /**
   * 申请授权（首次弹窗申请）
   * @param permissionList 权限集合
   * @returns true：权限完全加载；false：有权限没有加载
   */
  public static async RequestPermissions(permissionList: Permissions[]): Promise<boolean> {
    // 程序访问控制管理
    const atManager = abilityAccessCtrl.createAtManager();
    // 拉起弹框请求用户授权
    const grantStatus = await atManager.requestPermissionsFromUser(getContext(), permissionList)
    // 获取请求权限的结果
    const isAuth = grantStatus.authResults.every(v => v === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED)
    // 返回 Promise 授权结果
    return isAuth ? Promise.resolve(true) : Promise.reject(false)
  }

  /**
   * 打开系统设置的权限管理页面
   */
  public static OpenPermissionSettingsPage() {
    // 获取上下文
    const context = getContext() as common.UIAbilityContext
    // 获取包信息
    const bundleInfo = bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION)
    // 打开系统设置页
    context.startAbility({
      bundleName: 'com.huawei.hmos.settings',
      abilityName: 'com.huawei.hmos.settings.MainAbility',
      uri: 'application_info_entry',
      parameters: {
        // 按照包名打开对应设置页
        pushParams: bundleInfo.name
      }
    })
  }
}

总结

上面的流程是地图组件的初始化的个人理解流程，看完这篇希望可以在地图开发上给你提供帮助。


http://www.niftyadmin.cn/n/5864369.html

相关文章

mongodb的并发优化

mongodb的并发优化

MongoDB的锁模式 MongoDB的锁设计 MongoDB的高性能表现离不开它的多粒度锁机制。多粒度主要可以针对不同层级的数据库对象进行枷锁&#xff0c;通过避免全局性的互斥来提升并发能力。从整个数据库层面看&#xff0c;MongoDB的并发锁的分层如下图所示&#xff1a; 从上往下是一…
阅读更多...
计算机网络之路由协议（自治系统）

计算机网络之路由协议（自治系统）

一、自治系统&#xff08;AS&#xff09; 自治系统是由同一个技术管理机构管理、使用统一选路策略的一些路由器的集合。它是网络的基本构成单位&#xff0c;每个自治系统是一个独立运营并自主决定与谁交换流量的实体。自治系统内部运行内部网关协议&#xff08;IGP&#xff09…
阅读更多...
【过程控制系统】第一章 过程控制系统的设计和发展趋势，确定系统变量和控制方案

【过程控制系统】第一章 过程控制系统的设计和发展趋势，确定系统变量和控制方案

给大家分享我最近的作品 绘画时间&#xff1a;2025/2/23 角色&#xff1a;宫本武藏 Fate/Sumurai Renment 关注作者了解更多 我的其他CSDN专栏 毕业设计 求职面试 大学英语 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控…
阅读更多...
如何在java中用httpclient实现rpc get请求

如何在java中用httpclient实现rpc get请求

如果你想用 Java 的 HttpClient 实现 RPC 的 GET 请求&#xff0c;过程会稍微不同&#xff0c;因为 GET 请求通常通过 URL 参数&#xff08;查询字符串&#xff09;传递数据&#xff0c;而不是像 POST 那样通过请求体。以下是详细的讲解和示例代码。 1. GET 请求与 RPC 的特点…
阅读更多...
具有整合各亚专科医学领域知识能力的AI智能体开发纲要（2025版）

具有整合各亚专科医学领域知识能力的AI智能体开发纲要（2025版）

整合各亚专科医学领域知识能力的AI代理的开发与研究 一、引言 1.1 研究背景 在科技飞速发展的当下，人工智能（AI）已成为推动各行业变革的关键力量，医疗领域也不例外。近年来，AI 在医疗行业的应用取得了显著进展，从医学影像诊断到疾病预测，从药物研发到个性化医疗，AI 技…
阅读更多...
Unity技术突破

Unity技术突破

技术深度不足怎么办&#xff0c;不妨从以下几点进行突破&#xff1a; 后续会逐个更新并接入最新项目 内存&#xff1a; 拆装箱 资源引用泄漏static和SO 字符串拼接 协程的yield return内存压力 struct内存对齐 GC&#xff1a; foreach IDisposable控制释放时机 unit…
阅读更多...
力扣每日一题【算法学习day.133】

力扣每日一题【算法学习day.133】

前言 ###我做这类文章一个重要的目的还是记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&#xff01;&#xff01;&#xff01; 习题 1.设计跳表 题目链接:1206. 设计跳…
阅读更多...
第1章大型互联网公司的基础架构——1.9 LSM Tree

第1章大型互联网公司的基础架构——1.9 LSM Tree

**LSM Tree&#xff08;Log-Structured Merge Tree&#xff09;是一种对高并发写数据非常友好的键值存储模型&#xff0c;同时兼顾了查询效率。**LSMTree是我们下面将要介绍的NoSQL数据库所依赖的核心数据结构&#xff0c;例如BigTable.、HBase、 Cassandra、TiDB 等。 1.9.1 …
阅读更多...
最新文章

Copyright @ 2022~2023