鸿蒙开发-地图开发

开发准备

开发准备-Map Kit（地图服务

地图显示

import { map, mapCommon, MapComponent, sceneMap } from '@kit.MapKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
import { permissionPlugin } from './PermissionPlugin';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct HuaweiMapDemo {
  // 地图初始化选项
  private mapOptions?: mapCommon.MapOptions;
  // 地图初始化的回调函数
  private callback?: AsyncCallback<map.MapComponentController>;
  // 地图组件控制器
  private mapController?: map.MapComponentController;
  private mapEventManager?: map.MapEventManager;
  // 起点
  start: mapCommon.LatLng = { latitude: 23.125178, longitude: 113.280637 }
  // 终点
  end: mapCommon.LatLng = { latitude: 39.915599, longitude: 116.400244 }

  async aboutToAppear() {
    // 向用户请求定位权限
    permissionPlugin.requestPermissions(['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'])
    // 设置地图初始化参数，包括地图中心点的经纬度和缩放级别
    this.mapOptions = {
      // 地图中心点
      position: {
        target: {
          longitude: (this.start.longitude + this.end.longitude) / 2,
          latitude: (this.start.latitude + this.end.latitude) / 2
        },
        // 缩放级别
        zoom: 4
      },
    };
    // 设置地图初始化的回调函数
    this.callback = async (err, mapController) => {
      if (!err) {
        // 保存地图控制器，用于后续操作地图
        this.mapController = mapController
      }
    };
  }

 

  /**
   * 页面显示时的处理逻辑
   */
  onPageShow(): void {
    if (this.mapController !== undefined) {
      if (canIUse('SystemCapability.Map.Core')) {
        this.mapController.show(); // 显示地图
      }
    }
  }
  /**
   * 页面隐藏时的处理逻辑
   */
  onPageHide(): void {
    if (this.mapController !== undefined) {
      if (canIUse('SystemCapability.Map.Core')) {
        this.mapController.hide(); // 隐藏地图
      }
    }
  }

  build() {
    Stack() {
      // 当系统支持地图功能时，创建地图组件并应用初始化选项和回调函数
      if (canIUse('SystemCapability.Map.Core')) {
        MapComponent({
          mapOptions: this.mapOptions,
          mapCallback: this.callback
        })
          .width('100%')
          .height('100%')
      }
    }
    .height('100%')
  }
}

地图不显示的原因地图不显示-Map Kit常见问题-Map Kit

绘制折线

//添加折线
this.mapController.addPolyline({
  points:[
    { longitude: 118.78, latitude: 31.975 },
    { longitude: 118.78, latitude: 31.982 },
    { longitude: 118.79, latitude: 31.985 },
    { longitude: 118.80, latitude: 31.978 },
    { longitude: 118.81, latitude: 31.981 },
    { longitude: 118.82, latitude: 31.984 },
    { longitude: 118.83, latitude: 31.977 },
    { longitude: 118.84, latitude: 31.980 },
    { longitude: 118.85, latitude: 31.983 },
    { longitude: 118.86, latitude: 31.976 }
  ],
  width: 10,
  color: 0xFFFF2737
})

我的位置

// 启用我的位置图层
this.mapController.setMyLocationEnabled(true);
// 启用我的位置按钮
this.mapController.setMyLocationControlsEnabled(true);

添加标记

//添加标记
this.mapController.addMarker({
  position: { longitude: 118.78, latitude: 31.975 }
})
this.mapController.addMarker({
  position: { longitude: 118.86, latitude: 31.976 },
  icon: $r('app.media.app_icon')
})

规划路径

// 路径规划
const res = await navi.getDrivingRoutes({
  origins: [this.start],
  destination: this.end,
  waypoints: this.currents
})
// 添加路径
this.mapController.addPolyline({
  points: res.routes[0].overviewPolyline,
  width: 10,
  color: 0xFFFF2737
})

正地理编码

根据地址获取地点的经纬度

// 正地理编码
let zparams: site.GeocodeParams = {
  // 地址信息
  query: "山西省吕梁市中阳县金张线高家沟小学东侧约130米",
  language: "zh_CN",
};
const zresult = await site.geocode(zparams);
if (zresult.sites) {
  const res = zresult.sites[0]
  console.info("Succeeded in geocoding." + JSON.stringify(res.formatAddress));
}

逆地理编码

获取经纬度对应的地点信息

// 逆地理编码
let params: site.ReverseGeocodeParams = {
  // 位置经纬度
  location: this.start,
  language: "zh_CN",
  radius: 10
};
const result = await site.reverseGeocode(params);
console.info("Succeeded in reversing." + JSON.stringify(result.addressDescription));