一、华为地图开发准备工作
1. 配置 Client ID:
在完成基本准备及公钥指纹配置后,登录 AppGallery Connect(AGC) 平台获取目标应用的 Client ID(非项目的),并于工程 entry 模块的 module.json5 文件里,在 metadata 中新增配置,名称设为 client_id,值为所取 Client ID。
"module": {
"name": "xxxx",
"type": "entry",
"description": "xxxx",
"mainElement": "xxxx",
"deviceTypes": [
'phone',
'tablet'
],
"pages": "xxxx",
"abilities": [],
"metadata": [
{
"name": "client_id",
"value": "xxxxxx" // 配置为获取的Client ID
}
]
}
2. 开通地图服务:
登录 AGC 网站,选 “我的项目”,在项目下挑中需开地图服务的应用,经 API 管理寻地图服务开关开启,为地图开发筑牢根基,助开发者提升应用 LBS 体验、实现地图个性化呈现与交互。
二、显示地图
1.导入 Map Kit 模块
import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
2. 设 mapOptions 定地图中心及层级
@Entry
@Component
struct MapApp {
// 地图初始化参数
private mapOptions: mapCommon.MapOptions = {
position: {
target: {
latitude: 39.9, // 地图中心纬度,可按需修改
longitude: 116.4 // 地图中心经度,可按需修改
},
zoom: 10 // 地图层级,可调整
},
// 可按需设置其他地图属性,如是否支持旋转手势等
rotateGesturesEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
tiltGesturesEnabled: true,
mapType: mapCommon.MapType.STANDARD, // 地图类型,可切换
myLocationControlsEnabled: false, // 是否展示我的位置按钮,可设为 true 开启
compassControlsEnabled: true, // 是否展示指南针控件
scaleControlsEnabled: false // 是否展示比例尺,可设为 true 展示
};
MapOptions包含以下属性
属性 |
描述 |
---|---|
mapType |
地图类型,默认值:MapType.STANDARD。 |