华为地图
- 前言
- 一、Map Kit（地图服务）
- 二、具体实现
- 总结
前言
Map Kit（地图服务）为开发者提供强大而便捷的地图能力，助力全球开发者实现个性化显示地图、位置搜索和路径规划等功能，轻松完成地图构建工作。您可以轻松地在HarmonyOS应用/元服务中集成地图相关的功能，全方位提升用户体验。
一、Map Kit（地图服务）
Map Kit 提供以下功能，满足绝大多数地图开发的需求：
创建地图：呈现内容包括建筑、道路、水系等。
地图交互：控制地图的交互手势和交互按钮。
在地图上绘制：添加位置标记、覆盖物以及各种形状等。
位置搜索：多种查询Poi信息的能力。
路径规划：提供驾车、步行、骑行路径规划能力。
静态图：获取一张地图图片。
地图Picker：提供地点详情展示控件、地点选取控件、区划选择控件。通过Petal 地图应用实现导航等能力：查看位置详情、查看路径规划、发起导航、发起内容搜索。
地图计算工具：华为地图涉及的2种坐标系及其使用区域和转换。
二、具体实现
1. 创建地图
如果需要在自己的应用中使用地图组件相关功能，需要现在 AppGallery Connect 平台【开通相关权限】
利用的组件：MapComponent 地图组件，用于在您的页面中放置地图。
代码如下（示例）：
1.1 导入Map Kit相关模块
import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
1.2 新建地图初始化参数 mapOptions，设置地图中心点坐标及层级
通过callback回调的方式获取MapComponentController对象，用来操作地图。
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: 39.9,
longitude: 116.4
},
zoom: 10
},
scrollGesturesEnabled: true,
rotateGesturesEnabled: true,
dayNightMode: 2 //2--打开系统深色开关，显示夜间模式，否则显示日间模式。
//0--日间模式 / 1--深色模式
};
// 地图初始化的回调
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);
}
};
1.3 调用MapComponent组件，传入mapOptions和callback参数，初始化地图
build() {
Stack() {
// 调用MapComponent组件初始化地图
MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
.width('100%')
.height('100%')
}
.height('100%')
2.设置地图属性
MapOptions常用的属性如下，具体属性可见 链接
| 属性 | 描述 |
|---|---|
| mapType | 地图类型，默认值：MapType.STANDARD。 |
| position | 地图相机位置。 |
| bounds | 地图展示框。 |
| rotateGesturesEnabled | 是否支持旋转手势，默认值：true。 |
| scrollGesturesEnabled | 是否支持滑动手势，默认值：true。 |
| mapType | 地图类型，默认值：MapType.STANDARD。 |
| mapType | 地图类型，默认值：MapType.STANDARD。 |
3. 绘制折线 & 绘制标记点
代码如下（示例）：
private mapEventManager?: map.MapEventManager;
private mapPolyline?: map.MapPolyline;
// 绘制折线
// polyline初始化参数
let polylineOption: mapCommon.MapPolylineOptions = {
points: [
{ longitude: 116.4, latitude: 39.9 },
{ longitude: 116.5, latitude: 40.1 },
{ longitude: 87.640949, latitude: 43.831917 }
],
clickable: true,
startCap: mapCommon.CapStyle.BUTT,
endCap: mapCommon.CapStyle.BUTT,
geodesic: false,
jointType: mapCommon.JointType.BEVEL,
visible: true,
width: 10,
zIndex: 10,
gradient: false,
color: 0xffff0000
}
// 创建polyline
this.mapPolyline = await this.mapController.addPolyline(polylineOption);
// 绘制标记点
let markerOptions: mapCommon.MarkerOptions = {
position: { longitude: 116.4, latitude: 39.9 },
rotation: 0,
visible: true,
zIndex: 0,
alpha: 1,
anchorU: 0.5,
anchorV: 1,
clickable: true,
draggable: true,
flat: false
};
// 创建Marker
await this.mapController.addMarker(markerOptions);
let markerOptions1: mapCommon.MarkerOptions = {
position: { longitude: 87.640949, latitude: 43.831917 },
rotation: 0,
visible: true,
zIndex: 0,
alpha: 1,
anchorU: 0.5,
anchorV: 1,
clickable: true,
draggable: true,
flat: false
};
// 创建Marker
await this.mapController.addMarker(markerOptions1);
总结
以上就是华为地图在开发中的基本使用，一些更具体的用法还是要看 API 来实现。
链接： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/map-kit-guide-V5