#HarmonyOS NEXT体验官#HarmonyOS NEXT 地图探险家：实现华为地图原创

紫妍是我

发布于 2024-8-15 22:25

浏览

0收藏

背景

在这个信息化时代，地图导航就像是我们的私人向导，总是在我们需要的时候及时出现，帮我们指路。地图信息化的重要性，简直就像是一杯清晨的咖啡对程序员一样不可或缺！它在现代社会中的角色，可是举足轻重！

#HarmonyOS NEXT体验官#HarmonyOS NEXT 地图探险家：实现华为地图-鸿蒙开发者社区

那么地图信息化的重要性都体现在哪些方面呢？

地理信息系统（GIS）：地图信息化是地理信息系统的基础，GIS能够收集、存储、管理和分析地理空间数据，为决策提供支持。同时GIS广泛应用于城市规划、资源管理、环境保护、灾害预测与响应等多个方面。

导航与定位服务：地图信息化支持GPS和导航系统，为个人用户提供准确的定位信息。智能交通系统依赖于地图信息化来实现路线规划、实时路况监控等功能

想象一下，没有了地图导航，我们可能会在寻找咖啡馆的路上迷路无数次……

#HarmonyOS NEXT体验官#HarmonyOS NEXT 地图探险家：实现华为地图-鸿蒙开发者社区

既然地图功能这么重要，那么在鸿蒙开发中，我们怎样才能让它成为我们应用的一部分呢？

开发准备

首先我们需要在AppGallery Connect创建项目，创建成功后，根据项目ID在项目的module.json5中进行配置

获取id

#HarmonyOS NEXT体验官#HarmonyOS NEXT 地图探险家：实现华为地图-鸿蒙开发者社区

id在项目中的配置（如图所示）

#HarmonyOS NEXT体验官#HarmonyOS NEXT 地图探险家：实现华为地图-鸿蒙开发者社区

配置完成后，我们就可以回到项目配置中开启项目绑定的地图服务啦！

#HarmonyOS NEXT体验官#HarmonyOS NEXT 地图探险家：实现华为地图-鸿蒙开发者社区

这时候我们创建的项目就开启了地图服务，并且通过id 对项目完成了绑定

功能实现

绑定完成后我们需要在page页面中进行地图的显示

1.首先借助鸿蒙的能力先进行api模块的导入

import { MapComponent, mapCommon, map } from '@kit.MapKit';

import { AsyncCallback } from '@kit.BasicServicesKit';

2. 新建地图初始化mapOptions，设置地图中心点坐标和层级。

 this.mapOptions = {
      position: {
        target: {
          latitude: 0,//可以根据实际地址进行填写
          longitude: 0//可以根据实际地址进行填写

        },
        zoom: 10
      }
    };

通过callback回调的方式获取MapComponentController对象，用来操作地图。

调用MapComponent组件，传入mapOptions和callback参数，初始化地图。

#HarmonyOS NEXT体验官#HarmonyOS NEXT 地图探险家：实现华为地图-鸿蒙开发者社区

@Entry
@Component
struct HuaweiMapDemo {
  private TAG = "HuaweiMapDemo";
  private mapOptions?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  private mapEventManager?: map.MapEventManager;

  aboutToAppear(): void {
    // 地图初始化参数，设置地图中心点坐标及层级
    this.mapOptions = {
      position: {
        target: {
          latitude: 38.6,
          longitude: 115.1
        },
        zoom: 10
      }
    };

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        // 获取地图的控制器类，用来操作地图
        this.mapController = mapController;
        this.mapEventManager = this.mapController.getEventManager();
        let callback = () => {
          console.info(this.TAG, `on-mapLoad`);
        }
        this.mapEventManager.on("mapLoad", callback);
      }
    };
  }

  // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效
  onPageShow(): void {
    // 切换前台
    if (this.mapController !== undefined) {
      this.mapController.show();
    }
  }

 
  onPageHide(): void {
    // 切换到后台
    if (this.mapController !== undefined) {
      this.mapController.hide();
    }
  }

  build() {
    Stack() {
      // 调用MapComponent组件初始化地图
      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');
    }.height('100%')
  }
}

执行代码后地图显示如下

#HarmonyOS NEXT体验官#HarmonyOS NEXT 地图探险家：实现华为地图-鸿蒙开发者社区

要知道在很多应用上都会在地图上添加一个当前位置的功能用来快速定位，要实现这样一个功能，在华为地图中非常简单，只需要添加一个属性，在初始化中添加

this.mapOptions = {
      position: {
        target: {
          latitude: 30.253083,
          longitude: 120.215512
        },
        zoom: 10
      },
      myLocationControlsEnabled: true};

这时候当前定位的图片就显示出来了

#HarmonyOS NEXT体验官#HarmonyOS NEXT 地图探险家：实现华为地图-鸿蒙开发者社区