显示地图 最后更新时间: 2024年04月23日
使用地图SDK之前，需要在 config.json 文件中进行相关权限设置，确保地图功能可以正常使用。
第一步，配置module.json5
首先，声明权限
...
"requestPermissions": [
{
"name": 'ohos.permission.INTERNET',
}
]
...第二步，在工程的oh-package.json5文件中添加依赖
从ohpm仓库获取高德地图包
"dependencies": {
"@amap/amap_lbs_common": "1.0.1",
"@amap/amap_lbs_map3d": "1.0.2"
}第三步，初始化地图容器
1
从高德地图包中导入所需模块
import { AMap, MapsInitializer, MapView, MapViewComponent, MapViewManager } from '@amap/amap_lbs_map3d';3
获取MapView
MapViewManager.getInstance().getMapView((mapview?: MapView) => {
if (!mapview) return;
let mapView: MapView = mapview;
...
})4
初始化地图并获取AMap对象
mapView.onCreate();
mapView.getMapAsync((map) => {
let aMap: AMap = map;
// aMap.setTrafficEnabled(true) //打开交通路况图层
// TODO
})5
地图组件配置
MapViewComponent()
.width('100%')
.height('100%')
至此就可以看到地图展示，并且拿到了AMap对象后，就可以往地图上添加点线面等覆盖物
6
完整代码示例
import { AMap, MapsInitializer, MapView, MapViewComponent, MapViewManager } from '@amap/amap_lbs_map3d';
MapsInitializer.setApiKey("您的key");
MapViewManager.getInstance().getMapView((mapview?: MapView) => {
if (!mapview) return;
let mapView: MapView = mapview;
mapView.onCreate();
mapView.getMapAsync((map) => {
let aMap: AMap = map;
})
})
@Entry
@Component
struct Index {
build() {
Row() {
MapViewComponent()
.width('100%')
.height('100%')
}
}
}