定位图层
开发者可通过调用mapController.setLocationInfo方法对定位图层进行定位数据、展示配置等控制。也可通过单独调用setLocation单独对定位数据进行设置,或者单独调用setLocationConfig对定位个性化展示配置进行设置。
配置项参数如下:
定位点数据设置项ILocation:
| 参数名 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
latlng | LatLng | ✅ 是 | 位置坐标 |
direction | number | ✅ 是 | 方向角度(单位:度) |
radius | number | 否 | 定位数据的精度(单位:米) |
satellitesNum | number | 否 | 定位数据的卫星数目 |
speed | number | 否 | 定位数据的速度(单位:米/秒) |
定位图层配置项ILocationConfig:
| 参数名 | 类型 | 是否必填 | 默认值 | 说明 |
|---|---|---|---|---|
locationMode | LocationMode | 否 | — | 定位图层显示方式 |
enableDirection | boolean | 否 | true | 是否显示方向信息 |
enableRotation | boolean | 否 | false | 是否支持图标旋转 |
arrow | image.PixelMap | 否 | — | 自定义定位箭头图标 |
arrowSize | number | 否 | 1.0 | 箭头大小比例(范围 0.2~3.0) |
customMarker | image.PixelMap | 否 | — | 用户自定义定位图标(支持 png、jpg) |
gifMarker | string | 否 | null | 用户自定义 GIF 定位图标路径(与 customMarker 二选一) |
markerSize | number | 否 | 1.0 | 定位图标大小比例(范围 0.1~2.0) |
isNeedAnimation | boolean | 否 | true | 图标是否需要呼吸动画(仅箭头+图标模式下生效) |
accuracyCircleFillColor | ColorString | 否 | — | 精度圈填充颜色 |
isEnableCustom | boolean | 否 | — | 是否支持图标自定义 |
显示定位
MapComponent({ onReady: async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController= mapController;let myLocation: ILocation = {latlng: new LatLng(39.907916, 116.408599),direction: 90,radius: 1000}this.mapController?.setLocationInfo(this.myLocation, {locationMode: SysEnum.LocationMode.NORMAL});}}, mapOptions: this.mapOpt}).width('100%').height('100%')
自定义内容
通过ILocationConfig来构造定位图层的配置,定位模式、是否开启方向、设置自定义定位图标、精度圈填充颜色等。开发者可以利用mapController中的setLocationInfo或者setLocationConfig方法来设置地图类型,下面做简单展示。
定位模式
地图SDK支持三种定位模式:NORMAL(普通态), FOLLOWING(跟随态),COMPASS(罗盘态)
//默认普通态this.mapController?.setLocationConfig({locationMode:SysEnum.LocationMode.NORMAL})//跟随态this.mapController?.setLocationConfig({locationMode:SysEnum.LocationMode.FOLLOWING})//罗盘态this.mapController?.setLocationConfig({locationMode:SysEnum.LocationMode.COMPASS})
自定义静态定位图标和箭头
const flower = await this.createBitmapDescriptor($rawfile('flower.png'));const arrow = await this.createBitmapDescriptor($rawfile('end.png'));let config:ILocationConfig = {isEnableCustom:true, // 开启个性化配置arrow: end, //箭头图标设置arrowSize: 2, //箭头大小设置customMarker:flower, //定位marker图标设置markerSize: 0.2, //定位marker大小设置isNeedAnimation: true //开启气泡动画}this.mapController.setLocationConfig(config)
显示效果如下:
自定义gif定位图标
await this.copyRawFileToAppFiles(this.context,'icon_cat.gif');let config:ILocationConfig = {isEnableCustom:true,arrow: end,arrowSize: 2,isNeedAnimation: false, //关闭呼吸动画gifMarker: `${this.context.tempDir}/icon_cat.gif`, //设置定位marker为gif资源markerSize: 0.2,accuracyCircleFillColor: '#FFC0CB' //设置精度圈为粉色}this.mapController.setLocationConfig(config)
显示效果如下:
上一篇
下一篇
本篇文章对您是否有帮助?