地图控件主要包括:缩放控件、比例尺控件、定位控件和地图审图控件。
地图控件采用鸿蒙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字段进行控制。
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}})}}, mapOptions: this.mapOpt}).width('100%').height('100%')
MapComponent({ onReady: async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController = mapController;emitter.on({ eventId: EmitEvent.changeGeoLocation }, (e) => {console.log('获取点击定位控件的定位数据',e)})}}, mapOptions: this.mapOpt}).width('100%').height('100%')
上一篇
下一篇
本篇文章对您是否有帮助?