鸿蒙初学者学习手册(HarmonyOSNext_API12)_地图项目map操作笔记

注 ： 为了完成定位自身位置发送消息的需求

第一步获取证书

四个证书

第一个在编译器获取的p12证书

第二个证书是CSR需要在p12后生成

第三个证书在AGC的调试证书CSR

第四个证书是项目证书p7b

完成项目证书连接

如果你看到这，说明这个证书的配置就差不多了，然后就到了编译器的证书配置和代码的书写了

1>获取经纬度

2>通过经纬度获取街道位置

3>设置我在地图的位置

4>准备一个位置所在的相机

5>移动相机至地图指定位置(转换坐标格式)

6>位置图层渲染

7>根据相机渲染范围图层

这是这个项目中的关键代码需要写功能，第一次写会麻烦一点，之后如果要做专业的地图或者啥的还需要细研究

先大概看看代码

//-----------------------------------------------------------
//----------------------------这是代码的index页面----------------
//-----------------------------------------------------------
import location from './location'

// 定义一个Index组件，用于展示地图查看和位置发送的功能
@Entry
@Component
struct Index {
  // 控制是否显示地图的状态变量
  @State showMap: boolean = false
  // 地图消息状态变量，用于传递地图位置信息
  @State mapMessage: string = ""
  // 显示位置信息的状态变量
  @State showLocation:string =""

  // 定义一个构建器方法，用于构建地图界面
  @Builder
  mapBuilder() {
      Column(){
        Stack({
          alignContent:Alignment.TopStart
        }){
          Row(){
            // 返回按钮，点击后隐藏地图界面
            Text("返回")
              .onClick(()=>{
                this.showMap = false
              })
            Blank()
            // 发送按钮，点击后隐藏地图界面并显示位置信息
            Text("发送")
              .onClick(()=>{
                this.showMap = false
                this.showLocation = this.mapMessage
              })
          }.width('100%')
          .height(80)
          .padding(15)
        }.width('100%')

        // 引入location组件，用于显示地图和获取位置信息
        location({
          mapMessage: this.mapMessage
        })
      }
    .width("100%")
    .height("100%")
  }

  // 构建方法，用于构建Index组件的界面
  build() {
    Row() {
      Column(){
        // 查看地图按钮，点击后显示地图界面
        Text("查看地图")
          .onClick(() => {
            this.showMap = true
          })
          // 使用bindContentCover方法绑定地图界面，并设置模态转换和消失逻辑
          .bindContentCover(this.showMap, this.mapBuilder(), {
            modalTransition: ModalTransition.NONE,
            onWillDisappear: () => {
              this.showMap = false
            }
          })
        // 显示位置信息文本
        Text(this.showLocation)

      }.width('100%')
      .justifyContent(FlexAlign.Center)
      .height('100%')
      // 显示地图消息文本
      Text(this.mapMessage)
    }.width('100%')
    .height("100%")

  }
}

//-----------------------------------------------------------
//----------------------------这是代码的这是组件部分代码----------------
//-----------------------------------------------------------

import { AsyncCallback } from '@kit.BasicServicesKit'
import { map, mapCommon, MapComponent } from '@kit.MapKit'
import { geoLocationManager } from '@kit.LocationKit'

/**
 * Location组件用于获取和展示用户当前位置信息
 * 它通过调用地理位置API获取用户经纬度，并将其转换为可读的街道地址
 * 然后，它在地图上标记用户位置，并显示相关信息
 */
@Component
struct location {
  // mapCallback用于处理地图组件初始化完成后的回调
  mapCallback?: AsyncCallback<map.MapComponentController, void>
  // controller用于控制地图组件的行为
  controller?: map.MapComponentController
  // mapMessage用于展示地图上的信息
  @Link mapMessage:string
  // currentMessage用于存储当前获取到的地理位置信息
  @State currentMessage:string = ""

  /**
   * getLocaltaion方法用于获取用户当前位置并将其展示在地图上
   * 它首先获取用户的经纬度，然后将其转换为街道地址
   * 接着，它在地图上标记用户位置，并添加相关信息
   */
  async getLocaltaion() {
    //获取当前经纬度
    const result = await geoLocationManager.getCurrentLocation()
    //经纬度转化为街道
    const  res = await geoLocationManager.getAddressesFromLocation({
      latitude:result.latitude,
      longitude:result.longitude
    })
    this.currentMessage = res[0].placeName as string
    //设置为当前位置展示---这些不是全都要，只是单纯看着了就写了，
   // 其实除了必须的其他的没啥用
    this.controller?.setMyLocation({
      latitude:result.latitude,
      longitude:result.longitude,
      accuracy:0,
      altitude:0,
      speed:0,
      timeStamp:0,
      direction:0,
      timeSinceBoot:0,
      altitudeAccuracy:0,
      speedAccuracy:0,
      directionAccuracy:0,
      uncertaintyOfTimeSinceBoot:0,
      sourceType:1
    })

    //坐标转化 wgs84 转化为gcj02
    const newPosition:mapCommon.LatLng =
      await map.convertCoordinate(mapCommon.CoordinateType.WGS84,mapCommon.CoordinateType.GCJ02,
        result
    )

    //准备一个相机，将位置移动到地图上
    let cameraUpdate:map.CameraUpdate =  map.newCameraPosition({
      target : {
        longitude:newPosition.longitude,
        latitude:newPosition.latitude
      },
      zoom:15
    })
    this.controller?.moveCamera(cameraUpdate)
    //当前定位的坐标
    this.controller?.addMarker({
      position:{
        longitude:newPosition.longitude,
        latitude:newPosition.latitude
      },
      title:`当前位置`,
      snippet:`当前位置${this.currentMessage}`,
      clickable:true
    })
    this.mapMessage = this.currentMessage
    //有效区域
    this.controller?.addCircle({
      center:{
        longitude:newPosition.longitude,
        latitude:newPosition.latitude
      },
      radius:500,
      strokeWidth:5,

    })
  }

  /**
   * aboutToAppear方法用于在组件即将显示时执行初始化操作
   * 它设置地图回调函数，以处理地图组件的初始化和用户位置获取
   */
  aboutToAppear(): void {
    this.mapCallback = async  (err,controller) => {
      if (!err) {
        this.controller  = controller
        // 设置地图展示位置
        this.controller.setMyLocationEnabled(true)
        // 设置地图的控制器
        this.controller.setMyLocationEnabled(true)
        // 开启3d--我试过了没啥用，和平面没啥区别→_→
        // this.controller.setBuildingEnabled(true)
        this.getLocaltaion()
      }
    }
  }

  /**
   * build方法用于构建和显示地图组件
   * 它设置地图的初始位置和缩放级别，并注册地图回调函数
   */
  build() {
    MapComponent({
      mapOptions: {
        position: {
          target: {
            latitude: 39.909,
            longitude: 116.397
          },
          zoom: 15,
        }
      },
      mapCallback:this.mapCallback
    })
    .width("100%")
    .height("100%")
  }
}
export default location

下面这个就是那个好多属性和参数的哪里的图，看看就行，知道那个是必须写，那个是非必须的就行

这是整个这个地图的demo的流程图

这是这里用到的API 正式的地图开发有但是不限于一下这些Api

1. 获取用户当前位置：
   使用 geoLocationManager.getCurrentLocation() 获取用户的经纬度。
   使用 geoLocationManager.getAddressesFromLocation() 将经纬度转换为街道地址。
2. 在地图上标记用户位置：
   使用 controller.setMyLocation() 在地图上标记用户位置。
   使用 map.convertCoordinate() 将坐标从 WGS84 转换为 GCJ02。
   使用 controller.moveCamera() 移动地图摄像头到当前位置。
   使用 controller.addMarker() 添加当前位置标记。
   使用 controller.addCircle() 添加有效区域圆圈。
3. 初始化地图组件：
   在 aboutToAppear() 方法中设置地图回调函数 mapCallback。
   在 mapCallback 中初始化地图控制器 controller。
   调用 getLocaltaion() 方法获取并展示用户位置。
4. 构建和显示地图组件：
   在 build() 方法中设置地图的初始位置和缩放级别。
   注册地图回调函数 mapCallback。
   通过以上步骤，组件能够获取用户当前位置并在地图上进行展示。

git地址：https://gitee.com/Yy2575663368/hongmeng-map-positioning.git，需要的可以自取尝试一下