产品服务
解决方案
文档与支持
定价

地图控件

下载开发文档

从1.2.7版本开始,不再支持定位控件,由用户自行封装定位SDK开发控件实现。

地图控件主要包括:百度logo控件、缩放控件、定位控件、比例尺控件和地图审图控件。

地图控件采用鸿蒙emitter事件机制进行控制,emit数据结构如下:

{
data:{
mapViewId: string, // 地图标识
x: number, // x方向距离
y: number, // y方向距离
Alignment: Alignment, // 对齐方式
show: boolean // 是否显示
}
}

相关引入如下:

import { Event as EmitEvent } from '@bdmap/map';
import emitter from '@ohos.events.emitter';

显示隐藏设置

通过data的show和mapViewId字段进行控制。地图logo控件不支持设置不显示。

MapComponent({ onReady: async (err, mapController) => {
if (!err) {
// 获取地图的控制器类,用来操作地图
this.mapController = mapController;
emitter.emit({ eventId: EmitEvent.LocationCom }, {
data: {
show: true,
mapViewId: this.mapController?.mapViewId
}
})
emitter.emit({ eventId: EmitEvent.ScaleCom }, {
data: {
show: true,
mapViewId: this.mapController?.mapViewId
}
})
emitter.emit({ eventId: EmitEvent.ZoomCom }, {
data: {
show: true,
mapViewId: this.mapController?.mapViewId
}
})
emitter.emit({ eventId: EmitEvent.Copyright }, {
data: {
show: true,
mapViewId: this.mapController?.mapViewId
}
})
}
}, mapOptions: this.mapOpt}).width('100%').height('100%')

显示位置设置

通过data的x、y、Alignment和mapViewId字段进行控制。

MapComponent({ onReady: async (err, mapController) => {
if (!err) {
// 获取地图的控制器类,用来操作地图
this.mapController = mapController;
emitter.emit({ eventId: EmitEvent.LocationCom }, {
data: {
show: true,
mapViewId: this.mapController?.mapViewId,
y: -200
}
})
emitter.emit({ eventId: EmitEvent.ScaleCom }, {
data: {
show: true,
mapViewId: this.mapController?.mapViewId,
y: -200
}
})
emitter.emit({ eventId: EmitEvent.ZoomCom }, {
data: {
show: true,
mapViewId: this.mapController?.mapViewId,
y: -200
}
})
emitter.emit({ eventId: EmitEvent.Copyright }, {
data: {
show: true,
mapViewId: this.mapController?.mapViewId,
y: -50
}
})
emitter.emit({ eventId: EmitEvent.LogoCom }, {
data: {
mapViewId: this.mapController?.mapViewId,
width: `120px`,
height: `40px`,
x: "20px",
y: '-80px',
Alignment: Alignment.BottomStart
}
})
}
}, mapOptions: this.mapOpt}).width('100%').height('100%')

上一篇

位置短地址分享

下一篇

请求状态码说明

本篇文章对您是否有帮助?