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

定位图层

下载开发文档

开发者可通过调用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)

显示效果如下:

上一篇

位置短地址分享

下一篇

请求状态码说明

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