opencloud/.agents/skills/amap-jsapi-skill/references/api/marker.md at 4b2cc53231368f47a89adb12ebe8134617ce3865

Mplan/opencloud

Fork 0

Files

T

Mplan 582a4214b6 Add SEO metadata and security headers

2026-05-23 11:17:29 +08:00

44 KiB

Raw Blame History

点标记

用于在地图上添加点状地图要素的类型

Marker

点标记

Parameters

opts MarkerOptions 点标记参数
- opts.map Map 要显示该marker的地图对象
- opts.position (Vector2 | LngLat) 点标记在地图上显示的位置
- opts.icon (Icon | string) 在点标记中显示的图标。可以传一个图标地址，也可以传Icon对象。有合法的content内容设置时，此属性无效。
- opts.content (string | HTMLElement) 点标记显示内容。可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖。
- opts.title string 鼠标滑过点标记时的文字提示。不设置则鼠标滑过点标无文字提示。
- opts.visible boolean 点标记是否可见，默认值：true
- opts.zIndex number 点标记的叠加顺序。地图上存在多个点标记叠加时，通过该属性使级别较高的点标记在上层显示，默认zIndex：12
- opts.offset (Vector2 | Pixel) 点标记显示位置偏移量，默认值为[0,0]。Marker指定position后，默认以marker左上角位置为基准点（若设置了anchor，则以anchor设置位置为基准点），对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。
- opts.anchor (string | Vector2) 设置点标记锚点，可选值：'top-left','top-center','top-right', 'middle-left', 'center', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right' [相关示例][72]
- opts.angle number 点标记的旋转角度，，广泛用于改变车辆行驶方向。默认值：0
- opts.clickable boolean 点标记是否可点击，默认值: true
- opts.draggable boolean 设置点标记是否可拖拽移动，默认值：false
- opts.bubble boolean 事件是否冒泡，默认为 false
- opts.zooms Vector2 点标记显示的层级范围，超过范围不显示。默认值：zooms: [2, 20]
- opts.cursor string 指定鼠标悬停时的鼠，默认值：'pointer'
- opts.topWhenClick boolean 鼠标点击时marker是否置顶，默认false ，不置顶
- opts.label object 添加文本标注
  - opts.label.content string 文本标注的内容
  - opts.label.offset (Pixel | Vector2 | Array<number>) 为偏移量。如设置了 direction，以 direction 方位为基准点进行偏移。
  - opts.label.direction string 文本标注方位可选值：'top'|'right'|'bottom'|'left'|'center'，默认值: 'right'。
- opts.extData any 用户自定义属，支持JavaScript API任意数据类型，如 Marker的id等。可将自定义数据保存在该属性上，方便后续操作使用。

Examples

var marker = new AMap.Marker({
    position: new AMap.LngLat(116.397428, 39.90923),
    icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    anchor: 'bottom-center',
});
map.add(marker);

getTitle

获取点标记的文字提示

Returns (string | undefined)

setTitle

设置鼠标滑过点标记时的文字提示

Parameters

title string 点标记的文字提示

getIcon

当点标记未自定义图标时，获取Icon内容

Returns (Icon | string | undefined)

setIcon

设置点标记的显示图标，设置了有效 content 则 icon 不生效

Parameters

icon (Icon | string) 点标记中显示的图标

getLabel

获取点标记文本标签内容

Returns LabelOptions 文本标签设置项

setLabel

设置点标记文本标签内容

Parameters

opts LabelOptions

getClickable

获取点标记是否支持鼠标单击事件

Returns boolean

setClickable

设置点标记是否支持鼠标单击事件

Parameters

clickable boolean 默认值: true

getDraggable

获取点标记对象是否可拖拽移动

Returns boolean

setDraggable

设置点标记对象是否可拖拽移动

Parameters

draggable boolean

getTop

获取该点标记是否置顶

Returns boolean

setTop

地图上有多个marker时，设置是否置顶该点标记

Parameters

isTop boolean

getCursor

获取鼠标悬停时的光标设置

Returns string

setCursor

设置鼠标悬停时的光标

Parameters

cursor string

getExtData

获取用户自定义数据

Returns (any | undefined)

setExtData

设置用户自定义数据

Parameters

extData 用户自定义数据

remove

移除点标记 [相关示例][73]

moveTo

以给定时长/速度移动点标记到指定位置, 需加载 AMap.MoveAnimation 插件才可使用

Parameters

targetPosition (LngLat | Vector2) 指定位置
opts MoveToOptions moveTo 动画参数
- opts.duration number 每段动画持续时长, 单位：ms
- opts.speed number 动画速度，已废弃
- opts.easing EasingCallback easing 时间函数
- opts.autoRotation boolean 点标记方向是否沿路径旋转

Examples

AMap.plugin('AMap.MoveAnimation', function(){
    // 加载完 AMap.MoveAnimation 插件以后，创建一个 Marker 实例
    const animationMarker = new AMap.Marker({
        position: new AMap.LngLat(116.397389,39.909466),
        icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
        offset: new AMap.Pixel(-13, -26),
    });
    // 调用 moveTo 方法
    animationMarker.moveTo([116.397389, 39.909466], {
        duration: 1000,
        delay: 500,
    });
});

moveAlong

以指定的时长，点标记沿指定的路径移动，加载 AMap.MoveAnimation 后可以使用 JSAPI 2.0 可支持分段设置速度和时长 [相关示例][75]

Parameters

path (Array<LngLat> | Array<Vector2> | Array<MoveAlongObj>) 路径数组
opts MoveAlongOptions moveAlong 动画参数可选
- opts.duration (number | AnimationCallback) 每段动画持续时长, 单位：ms
- opts.speed (number | AnimationCallback) 每段动画速度，已废弃
- opts.easing EasingCallback easing 时间函数
- opts.circlable boolean 动画是否循环
- opts.delay (number | AnimationCallback) 延迟动画时长
- opts.aniInterval number 每段完整动画间隔时长
- opts.autoRotation boolean 覆盖物是否沿路径旋转

Examples

const path = [
    new AMap.LngLat(116.397389, 39.909466),
    new AMap.LngLat(116.379707, 39.968168),
    new AMap.LngLat(116.434467, 39.95001),
    new AMap.LngLat(116.46365, 39.979481),
    new AMap.LngLat(116.397389, 39.909466),
];
// 分段设置时长
const customData = [
    { position: path[0], duration: 200 },
    { position: path[1], duration: 400 },
    { position: path[2], duration: 600 },
    { position: path[3], duration: 800 },
    { position: path[4], duration: 1000 },
];
AMap.plugin('AMap.MoveAnimation', function(){
    // 加载完 AMap.MoveAnimation 插件以后，创建一个 Marker 实例
    const animationMarker = new AMap.Marker({
        position: new AMap.LngLat(116.397389,39.909466),
        angle: 90,
    });
    // 调用 moveAlong 方法
    animationMarker.moveAlong(customData);
});

startMove

开启点标记动画，加载 AMap.MoveAnimation 后创建的点标记可以使用

Examples

animationMarker.startMove();

stopMove

停止点标记动画，加载 AMap.MoveAnimation 后创建的点标记可以使用

Examples

animationMarker.stopMove();

pauseMove

暂停点标记动画，加载 AMap.MoveAnimation 后创建的点标记可以使用

Examples

animationMarker.pauseMove();

resumeMove

重新启动点标记动画，加载 AMap.MoveAnimation 后创建的点标记可以使用

Examples

animationMarker.resumeMove();

getMap

获取覆盖物的地图实例

Returns (Map | null)

setMap

将覆盖物设置到地图上

Parameters

map (Map | null)

addTo

将覆盖物加到地图上

Parameters

map Map

add

将覆盖物加到地图上

Parameters

map Map

show

显示覆盖物

hide

隐藏覆盖物

getPosition

获取覆盖物位置

Returns any

setPosition

设置覆盖物位置

Parameters

position Vector2

getAnchor

获取覆盖物锚点

Returns (string | Vector2 | undefined)

Marker

设置覆盖物锚点

Parameters

anchor string

getOffset

获取覆盖物偏移量

Returns (Vector2 | Pixel | undefined | Array<number>)

setOffset

设置覆盖物偏移量

Parameters

offset (Vector2 | Pixel)

getAngle

获取覆盖物旋转角度

Returns (number | undefined)

setAngle

设置覆盖物旋转角度

Parameters

angle number

getSize

如设置了尺寸，获取设置的尺寸

Returns Vector2

setSize

设置尺寸

Parameters

size (Vector2 | Size)

getzIndex

获取覆盖物的叠加顺序

Returns (number | undefined)

setzIndex

设置覆盖物的叠加顺序

Parameters

zIndex number

getOptions

获取覆盖物的所有属性

Returns OverlayOptions

getContent

获取点标记显示的自定义内容

Returns (string | HTMLElement | undefined)

setContent

设置点标记显示的自定义内容，可以是HTML要素字符串或者HTML DOM对象

Parameters

content (HTMLDOM | string)

getBounds

获取点标记范围

Returns Bounds

Text

文本标记

Parameters

opts TextOptions 文本参数
- opts.map Map 要显示该marker的地图对象
- opts.position (Vector | LngLat) 点标记在地图上显示的位置
- opts.text LabelOptions 标记显示的文本内容
- opts.title string 鼠标滑过点标记时的文字提示
- opts.visible boolean 点标记是否可见，默认为true
- opts.zIndex number 点标记的叠加顺序
- opts.offset (Vector | Pixel) 点标记显示位置偏移量，默认值[0, 0]。[图解说明][78]
- opts.anchor (string | Vector) 设置点标记锚点。默认值：'center'。可选值：'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right'
- opts.angle number 点标记的旋转角度。默认值：0 。注：angle属性是使用CSS3来实现的，支持IE9及以上版本
- opts.clickable boolean 点标记是否可点击。默认值: true
- opts.draggable boolean 设置点标记是否可拖拽移动。默认值：false
- opts.bubble boolean 事件是否冒泡，默认值：false
- opts.zooms Vector 点标记显示的层级范围，超过范围不显示。默认值：zooms: [2, 20]。
- opts.cursor string 指定鼠标悬停时的鼠标样式。
- opts.topWhenClick boolean 鼠标点击时marker是否置顶，默认值: false
- opts.extData any 用户自定义属性，支持JavaScript API任意数据类型，如 Marker的id等。可将自定义数据保存在该属性上，方便后续操作使用。
- opts.style object 设置文本样式，Object同css样式表，如:{'background-color':'red'}

Examples

var text = new AMap.Text({
    position: new AMap.LngLat(116.397428, 39.90923),
    anchor: 'bottom-center',
    text: '文本标记',
    style: {'background-color':'red'},
});
map.add(text);

getText

获取文本标记内容

Returns (string | undefined)

text

设置文本标记内容

Parameters

text string

setStyle

修改文本标记样式。Object同css样式表，如:{'background-color':'red'}

Parameters

style

getTitle

获取文本标记的文字提示

Returns (string | undefined)

setTitle

设置鼠标滑过文本标记时的文字提示

Parameters

title string 文本标记的文字提示

getClickable

获取文本标记是否支持鼠标单击事件

Returns boolean

setClickable

设置文本标记是否支持鼠标单击事件

Parameters

clickable boolean 默认值: true

getDraggable

获取文本标记对象是否可拖拽移动

Returns boolean

setDraggable

设置文本标记对象是否可拖拽移动

Parameters

draggable boolean

getTop

获取该文本标记是否置顶

Returns boolean

getMap

获取文本标记的地图实例

Returns (Map | null)

setMap

将文本标记设置到地图上

Parameters

map (Map | null)

addTo

将文本标记加到地图上，不推荐使用。推荐使用 map.add(text);

Parameters

map Map

add

将文本标记加到地图上

Parameters

map Map

show

显示文本标记

hide

隐藏文本标记

getPosition

获取文本标记位置

Returns any

setPosition

设置文本标记位置

Parameters

position Vector

getAnchor

获取文本标记锚点

Returns (string | Vector | undefined)

Text

设置文本标记锚点

Parameters

anchor string

getOffset

获取文本标记偏移量

Returns (Vector | Pixel | undefined | Array<number>)

setOffset

设置文本标记偏移量，相对 anchor 后的偏移位置

Parameters

offset (Array<number> | Pixel)

getAngle

获取文本标记旋转角度

Returns (number | undefined)

setAngle

设置文本标记旋转角度

Parameters

angle number

getzIndex

获取文本标记的叠加顺序

Returns (number | undefined)

setzIndex

设置文本标记的叠加顺序

Parameters

zIndex number

getOptions

获取文本标记的所有属性

Returns OverlayOptions

getBounds

获取文本标记范围

Returns Bounds

moveTo

以给定速度移动文本标记到指定位置, 需加载 AMap.MoveAnimation 插件才可使用

Parameters

targetPosition (LngLat | Vector) 指定位置
opts MoveToOptions moveTo 动画参数
- opts.duration number 每段动画持续时长, 单位：ms
- opts.speed number 动画速度，已废弃
- opts.easing EasingCallback easing 时间函数
- opts.autoRotation boolean 覆盖物是否沿路径旋转

Examples

AMap.plugin('AMap.MoveAnimation', function(){
    // 加载完 AMap.MoveAnimation 插件以后，创建一个 Text 实例
    const animationText = new AMap.Text({
        text: '文本标记',
        position: new AMap.LngLat(116.397389,39.909466),
    });
    animationText.moveTo([116.397389, 39.909466], {
        duration: 1000,
        delay: 500,
    });
});

moveAlong

以指定的时长，文本标记沿指定的路径移动，加载 AMap.MoveAnimation 后可以使用

Parameters

path (Array<LngLat> | Array<Vector> | Array<MoveAlongObj>) 路径数组
opts MoveAlongOptions moveAlong 动画参数可选
- opts.duration (number | AnimationCallback) 每段动画持续时长, 单位：ms
- opts.speed (number | AnimationCallback) 每段动画速度，已废弃
- opts.easing EasingCallback easing 时间函数
- opts.circlable boolean 动画是否循环
- opts.delay (number | AnimationCallback) 延迟动画时长
- opts.aniInterval number 每段完整动画间隔时长
- opts.autoRotation boolean 覆盖物是否沿路径旋转

Examples

const path = [
    new AMap.LngLat(116.397389, 39.909466),
    new AMap.LngLat(116.379707, 39.968168),
    new AMap.LngLat(116.434467, 39.95001),
    new AMap.LngLat(116.46365, 39.979481),
    new AMap.LngLat(116.397389, 39.909466),
];
const customData = [
    { position: path[0], duration: 200 },
    { position: path[1], duration: 400 },
    { position: path[2], duration: 600 },
    { position: path[3], duration: 800 },
    { position: path[4], duration: 1000 },
];
AMap.plugin('AMap.MoveAnimation', function(){
    // 加载完 AMap.MoveAnimation 插件以后，创建一个 Text 实例
    const animationText = new AMap.Text({
        text: '文本标记',
        position: new AMap.LngLat(116.397389,39.909466),
    });
    animationText.moveAlong(customData);
});

startMove

开启文本标记动画，加载 AMap.MoveAnimation 后可以使用

Examples

animationText.startMove();

stopMove

停止文本标记动画，加载 AMap.MoveAnimation 后可以使用

Examples

animationText.stopMove();

pauseMove

暂停文本标记动画，加载 AMap.MoveAnimation 后可以使用

Examples

animationText.pauseMove();

resumeMove

重新启动文本标记动画，加载 AMap.MoveAnimation 后可以使用

Examples

animationText.resumeMove();

setTop

地图上有多个marker时，设置是否置顶该文本标记

Parameters

isTop boolean

getCursor

获取鼠标悬停时的光标设置

Returns string

setCursor

设置鼠标悬停时的光标

Parameters

cursor string

getExtData

获取用户自定义数据

Returns (any | undefined)

setExtData

设置用户自定义数据

Parameters

extData 用户自定义数据

remove

移除点标记

Icon

Parameters

opts

Icon

LabelMarker

标注类

Parameters

opts LabelMarkerOptions 标注参数
- opts.name string 标注名称，作为标注标识，并非最终在地图上显示的文字内容，显示文字内容请设置 opts.text.content
- opts.position (Vector2 | LngLat) 标注位置
- opts.zooms Vector2 标注显示级别范围，可选值：[2,20]
- opts.opacity number 标注透明度，默认值: 1
- opts.rank number 避让优先级，获取标注的优先级，该优先级用于 labelsLayer 支持避让时，rank 值大的标注会避让掉 rank 值低的标注。默认值：1
- opts.zIndex number 同一 LabelsLayer 内标注显示层级，数字越大越靠前，默认值: 1
- opts.visible boolean 标注是否可见，默认值: true
- opts.extData any 用户自定义类型数据，可将自定义数据保存在该属性上，方便后续操作使用。
- opts.icon IconOptions 标注图标设置
  - opts.icon.image string 图标 url。
  - opts.icon.size (Vector2 | Size) 图标大小，默认值：[36, 36]
  - opts.icon.clipOrigin (Vector2 | Pixel) 图标所在图片偏移位置，默认值: [0, 0]
  - opts.icon.clipSize (Vector2 | Size) 图标所在图片裁剪大小，若未设置，则使用图片大小
  - opts.icon.anchor (Vector2 | Pixel | string) 图标锚点，锚点位置对应设置的 position 位置。可选值：'top-left'| 'top-center'|'top-right'|'middle-left'|'center'| 'middle-right'| 'bottom-left'| 'bottom-center'| 'bottom-right' 。默认值：'top-left'。
- opts.text TextOptions 标注文本设置
  - opts.text.content string 文本标注的内容，该属性为直接显示在标注上的文本内容。
  - opts.text.direction string 文本标注方位。若设置了 icon，则 direction 是以 icon 为中心的偏移，若未设置 icon，则相对 position 偏移。可选值：'top'|'right'|'bottom'|'left'|'center'。默认值: right
  - opts.text.offset (Pixel | Vector2) 为偏移量，在 direction 基础上的偏移。默认值[0, 0]
  - opts.text.zooms Vector2 文本显示级别范围，可单独设置文本显示范围
  - opts.text.style TextStyleOptions 文本样式设置
    - opts.text.style.fontSize number 文字大小，默认值： 12
    - opts.text.style.fillColor string 文字颜色
    - opts.text.style.strokeColor string 文字描边颜色
    - opts.text.style.padding (string | Array<(string | number)>) 文字 padding。默认值：[3, 3, 3, 3]
    - opts.text.style.backgroundColor string 文字背景颜色
    - opts.text.style.borderColor string 文字背景描边颜色
    - opts.text.style.borderWidth number 文字背景描边粗细
    - opts.text.style.fold boolean 文字是否折行（6个字一折行）

Examples

// 创建一个 LabelMarker 实例
var labelMarker = new AMap.LabelMarker({
    position: [116.468599, 39.995847],
    opacity: 1,
    zIndex: 2,
    icon: {
        image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',
        anchor: 'bottom-center',
        size: [25, 34],
        clipOrigin: [459, 92],
        clipSize: [50, 68]
    },
    text: {
        content: '香猪坊',
        direction: 'right',
        style: {
            fontSize: 15,
            fillColor: '#fff',
            strokeColor: 'rgba(255,0,0,0.5)',
            strokeWidth: 2,
            padding: [3, 10],
            backgroundColor: 'yellow',
            borderColor: '#ccc',
            borderWidth: 3,
        }
    }
});
// 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
var labelsLayer = new LabelsLayer({
    collision: true,
});
// 将 LabelMarker 实例添加到 LabelsLayer 上
labelsLayer.add(labelMarker);
// 将 LabelsLayer 添加到地图上
map.add(labelsLayer);

getName

获取标注的名称，作为标注标识，并非最终在地图上显示的文字内容

Returns (string | undefined)

setName

设置标注的名称，作为标注标识，并非最终在地图上显示的文字内容

Parameters

name string

getPosition

获取标注的显示位置

Returns LngLat

setPosition

设置标注的位置

Parameters

position (LngLat | [number] | string)

getZooms

获取标注显示级别范围

Returns (Vector2 | undefined)

setZooms

设置显示级别范围

Parameters

zooms [number]

getOpacity

获取标注透明度值

Returns (number | undefined)

setOpacity

设置标注透明度

Parameters

opacity number

setRotation

设置标注旋转角度

Parameters

angle number 旋转角度

getRotation

获取标注旋转角度

Returns (number | 0) 旋转角度

getzIndex

获取标注的叠加顺序

Returns (number | undefined)

setzIndex

设置标注的叠加顺序

Parameters

zIndex number

getRank

获取标注的优先级，该优先级用于 labelsLayer 支持避让时，rank 值大的标注会避让掉 rank 值低的标注。

Returns (number | undefined)

setRank

设置标注的优先级，该优先级用于 labelsLayer 支持避让时，rank 值大的标注会避让掉 rank 值低的标注。

Parameters

rank number

getText

获取标注的文本设置

Returns (LabelMarkerTextOptions | undefined)

setText

设置标注的文本设置，可设置显示的文字内容和文字样式等

Parameters

textOpts LabelMarkerTextOptions

getIcon

获取标注的图标设置

Returns (LabelMarkerIconOptions | undefined)

setIcon

设置标注的图标设置，可设置显示的标注图片

Parameters

iconOpts LabelMarkerIconOptions

getOptions

获取标注的全部属性配置

Returns LabelMarkerOptions

getExtData

获取用户自定义属性

Returns (any | undefined)

setExtData

设置用户自定义属性

Parameters

extData

setTop

是否设置置顶标注，设置为 true 表示该标注会显示在所有标注之前

Parameters

isTop boolean

setVisible

设置该标注的可见性

Parameters

visible boolean

getVisible

获取该标注的可见性

Returns (boolean | undefined)

getCollision

获取该标注是否被避让，从而没有显示

Returns (boolean | undefined)

show

标注显示

hide

标注隐藏

remove

将自身从标注层移除

getStatus

获取函数执行状态时间节点

Returns Array<string>

moveTo

以给定速度移动标注到指定位置, 需加载 AMap.MoveAnimation 插件才可使用

Parameters

targetPosition (LngLat | Vector2) 指定位置
opts MoveToOptions moveTo 动画参数
- opts.duration number 每段动画持续时长, 单位：ms
- opts.speed number 动画速度，已废弃
- opts.easing EasingCallback easing 时间函数
- opts.autoRotation boolean 覆盖物是否沿路径旋转

Examples

AMap.plugin('AMap.MoveAnimation', function(){
    // 加载完 AMap.MoveAnimation 插件以后，创建一个 LabelMarker 实例
    const animationLabel = new AMap.LabelMarker({
        content: '标注',
        position: new AMap.LngLat(116.397389,39.909466),
        text: {
            content: '动画标注'
        }
    });
    labelsLayer.add(animationLabel);
    // 调用 moveTo 方法
    animationLabel.moveTo([116.397389, 39.909466], {
        duration: 1000,
        delay: 500,
    });
});

moveAlong

以指定的时长，标注沿指定的路径移动，加载 AMap.MoveAnimation 后可以使用

Parameters

path (Array<LngLat> | Array<Vector2> | Array<MoveAlongObj>) 路径数组
opts MoveAlongOptions moveAlong 动画参数可选
- opts.duration (number | AnimationCallback) 每段动画持续时长, 单位：ms
- opts.speed (number | AnimationCallback) 每段动画速度，已废弃
- opts.easing EasingCallback easing 时间函数
- opts.circlable boolean 动画是否循环
- opts.delay (number | AnimationCallback) 延迟动画时长
- opts.aniInterval number 每段完整动画间隔时长
- opts.autoRotation boolean 覆盖物是否沿路径旋转

Examples

const path = [
    new AMap.LngLat(116.397389, 39.909466),
    new AMap.LngLat(116.379707, 39.968168),
    new AMap.LngLat(116.434467, 39.95001),
    new AMap.LngLat(116.46365, 39.979481),
    new AMap.LngLat(116.397389, 39.909466),
];
const customData = [
    { position: path[0], duration: 200 },
    { position: path[1], duration: 400 },
    { position: path[2], duration: 600 },
    { position: path[3], duration: 800 },
    { position: path[4], duration: 1000 },
];
AMap.plugin('AMap.MoveAnimation', function(){
    // 加载完 AMap.MoveAnimation 插件以后，创建一个 LabelMarker 实例
    const animationLabel = new AMap.LabelMarker({
        content: '标注',
        position: new AMap.LngLat(116.397389,39.909466),
        text: {
            content: '动画标注'
        }
    });
    labelsLayer.add(animationLabel);
    // 调用 moveAlong 方法
    animationLabel.moveAlong(customData);
});

startMove

开启标注动画，加载 AMap.MoveAnimation 后创建的标注可以使用

Examples

animationLabel.startMove();

stopMove

停止标注动画，加载 AMap.MoveAnimation 后创建的标注可以使用

Examples

animationLabel.stopMove();

pauseMove

暂停标注动画，加载 AMap.MoveAnimation 后创建的标注可以使用

Examples

animationLabel.pauseMove();

resumeMove

重新启动标注动画，加载 AMap.MoveAnimation 后创建的标注可以使用

Examples

animationLabel.resumeMove();

richText

设置富文本

Parameters

richText any

richText

获取富文本属性信息

Returns any

ElasticMarker

灵活点标记

Parameters

opts ElasticMarkerOptions 灵活点标记参数
- opts.map Map 要显示该marker的地图对象
- opts.position (Vector | LngLat) 点标记在地图上显示的位置
- opts.visible boolean 点标记是否可见，默认为true
- opts.zIndex number 点标记的叠加顺序
- opts.offset (Vector | Pixel) 点标记显示位置偏移量
- opts.clickable boolean 点标记是否可点击
- opts.draggable boolean 设置点标记是否可拖拽移动
- opts.bubble boolean 事件是否冒泡，默认为 false
- opts.cursor string 指定鼠标悬停时的鼠标样式
- opts.topWhenClick boolean 鼠标点击时marker是否置顶
- opts.zoomStyleMapping Record<string, number> 表示地图级别与styles中样式的映射，{14:0,15:0,16:1,17:1,}表示14到15级使用styles中的第0个样式，16-17级使用第二个样式
- opts.extData any 用户自定义属性
- opts.styles Array<ElasticStyle> 多个不同样式的数组
  - opts.styles.icon ElasticIcon 灵活标注图标样式类型
    - opts.styles.icon.img string 图标 url
    - opts.styles.icon.size Vector 图标显示大小
    - opts.styles.icon.anchor (Vector | string) 图标锚点
    - opts.styles.icon.imageOffset (Vector | string) 图片偏移量
    - opts.styles.icon.imageSize number 图片大小
    - opts.styles.icon.fitZoom number 最合适的级别，在此级别下显示为原始大小
    - opts.styles.icon.scaleFactor number 地图放大一级的缩放比例系数
    - opts.styles.icon.maxScale number 最大放大比例
    - opts.styles.icon.minScale number 最小放大比例
  - opts.styles.label ElasticLabel 灵活标注文本样式类型
    - opts.styles.label.content ElasticLabel 文本内容
    - opts.styles.label.position ElasticLabel 文本位置相对于图标的基准点，可选值：BL、BM、BR、ML、MR、TL、TM、TR分别代表左下角、底部中央、右下角、左侧中央、右侧中央、左上角、顶部中央、右上角
    - opts.styles.label.offset ElasticLabel 相对position的偏移量
    - opts.styles.label.minZoom ElasticLabel label的最小显示级别

Examples

// 样式列表
var stylesArr = [{
   icon: {
       img: 'https://a.amap.com/jsapi_demos/static/resource/img/men3.png',
       size: [16, 16],//可见区域的大小
       anchor: 'bottom-center',//锚点
       fitZoom: 14,//最合适的级别
       scaleFactor: 2,//地图放大一级的缩放比例系数
       maxScale: 2,//最大放大比例
       minScale: 1//最小放大比例
   },
   label: {
       content: '百花殿',
       position: 'BM',
       minZoom: 15
   }
}, {
   icon: {
       img: 'https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png',
       size: [48, 63],
       anchor: 'bottom-center',
       fitZoom: 17.5,
       scaleFactor: 2,
       maxScale: 2,
       minScale: 0.125
   },
   label: {
       content: '万寿亭',
       position: 'BM',
       minZoom: 15
   }
}];
zoom 与样式的映射
var zoomStyleMapping1 = {
   14: 0,  // 14级使用样式 0
   15: 0,
   16: 0,
   17: 0,
   18: 1,
   19: 1,
   20: 1,
};
// 加载灵活点标记的插件
AMap.plugin(['AMap.ElasticMarker'], function(){
    var elasticMarker = new AMap.ElasticMarker({
        position: [116.405562, 39.881166],
        // 指定样式列表
        styles: stylesArray,
        // 指定 zoom 与样式的映射
        zoomStyleMapping: zoomStyleMapping,
    });
    map.add(elasticMarker);
});

getTitle

获取获取灵活点标记标记的文字提示

Returns (string | undefined)

setTitle

设置鼠标滑过灵活点标记时的文字提示

Parameters

title string 灵活点标记的文字提示

getClickable

获取灵活点标记是否支持鼠标单击事件

Returns boolean

setClickable

设置灵活点标记是否支持鼠标单击事件

Parameters

clickable boolean 默认值: true

getMap

获取覆盖物的地图实例

Returns (Map | null)

setMap

将覆盖物设置到地图上

Parameters

map (Map | null)

show

显示覆盖物

hide

隐藏覆盖物

getPosition

获取覆盖物位置

Returns any

setPosition

设置灵活点标记位置

Parameters

position Vector

setAnchor

设置灵活点标记锚点

Parameters

anchor string

getzIndex

获取覆盖物的叠加顺序

Returns (number | undefined)

setzIndex

设置覆盖物的叠加顺序

Parameters

zIndex number

getOptions

获取覆盖物的所有属性

Returns OverlayOptions

getBounds

Returns Bounds

getDraggable

获取灵活点标记对象是否可拖拽移动

Returns boolean

setDraggable

设置灵活点标记对象是否可拖拽移动

Parameters

draggable boolean

getTop

获取该灵活点标记是否置顶

Returns boolean

setTop

地图上有多个marker时，设置是否置顶该灵活点标记

Parameters

isTop boolean

getCursor

获取鼠标悬停时的光标设置

Returns string

setCursor

设置鼠标悬停时的光标

Parameters

cursor string

getExtData

获取用户自定义数据

Returns (any | undefined)

setExtData

设置用户自定义数据

Parameters

extData 用户自定义数据

remove

移除点标记

MarkerCluster

用于展示大量点标记，将点标记按照距离进行聚合，以提高绘制性能。点聚合支持用户自定义样式，以插件形式调用。

Parameters

map Map 要添加点聚合的地图对象
dataOptions Array 需要进行聚合显示的点数据
- dataOptions.lnglat Array 点标记的经纬度信息
- dataOptions.weight number 点标记的权重信息，以权重高的点为中心进行聚合
MarkerClusterOptions Object 点聚合属性设置
- MarkerClusterOptions.gridSize Number 聚合计算时网格的像素大小，默认60
- MarkerClusterOptions.maxZoom Number 最大的聚合级别，大于该级别就不进行相应的聚合。默认值为 18，即小于 18 级的级别均进行聚合，18 及以上级别不进行聚合
- MarkerClusterOptions.averageCenter Boolean 聚合点的图标位置是否是所有聚合内点的中心点。默认为 true。数据中如果含有权重值，以权重高的点为中心进行聚合
- MarkerClusterOptions.clusterByZoomChange Boolean 地图缩放过程中是否聚合。默认值 false。
- MarkerClusterOptions.styles Array<Object>
  
  指定聚合后的点标记的图标样式，可缺省，缺省时为默认样式
  
  数据元素分别对应聚合量在1-10,11-100,101-1000…的聚合点的样式；
  
  当用户设置聚合样式少于实际叠加的点数，未设置部分按照系统默认样式显示；
  
  单个图标样式包括以下几个属性：
  
  1. {string} url：图标显示图片的url地址（必选）
  
  2. {AMap.Size} size：图标显示图片的大小（必选）
  
  3. {AMap.Pixel} offset：图标定位在地图上的位置相对于图标左上角的偏移值。默认为(0,0),不偏移（可选）
  
  4. {AMap.Pixel} imageOffset：图片相对于可视区域的偏移值，此功能的作用等同CSS中的background-position属性。默认为(0,0)，不偏移（可选）
  
  5. {String} textColor：文字的颜色，默认为"#000000"（可选）
  
  6. {Number} textSize：文字的大小，默认为10（可选）
- MarkerClusterOptions.renderClusterMarker function
  
  该方法用来实现聚合点的自定义绘制，由开发者自己实现，API 将在绘制每个聚合点的时候调用这个方法，可以实现聚合点样式的灵活设定，指定了 renderClusterMarker 后 styles 无效。
  
  该函数的入参为一个Object，包含如下属性：
  
  1. count: 当前聚合点下聚合的 Marker 的数量
  
  2. marker: 当前聚合点显示的 Marker
- MarkerClusterOptions.renderMarker function
  
  该方法用来实现非聚合点的自定义绘制，由开发者自己实现，API 将在绘制每个非聚合点的时候调用这个方法
  
  该函数的入参为一个Object，包含如下属性：
  
  marker: 非聚合点 Marker 对象

Examples

// 数据格式为一组含有经纬度信息的数组，如下所示。其中【经纬度】lnglat 为必填字段，【权重】weight 为可选字段。
var points = [
 { weight: 8, lnglat: ["108.939621", "34.343147"] },
 { weight: 1, lnglat: ["112.985037", "23.15046"] },
 { weight: 1, lnglat: ["110.361899", "20.026695"] },
 { weight: 1, lnglat: ["121.434529", "31.215641"] }
];
// 加载点聚合插件
map.plugin(["AMap.MarkerCluster"],function(){
 var cluster = new AMap.MarkerCluster(map, points, {
     gridSize: 80 // 聚合网格像素大小
 });
});

addData

在原数据基础上添加数据，格式同 dataOptions

Parameters

dataOptions dataOptions

setData

设置数据，格式同 dataOptions

Parameters

dataOptions dataOptions

getClustersCount

获取聚合点的总数量

Returns Number

getGridSize

获取聚合网格的像素大小

Returns Number

setGridSize

设置聚合网格的像素大小

Parameters

size Number 像素大小

getMaxZoom

获取地图中点标记的最大聚合级别

Returns Number

setMaxZoom

设置地图中点标记的最大聚合级别

Parameters

zoom Number 级别

setStyles

设置样式聚合点，格式同 opts.styles

Parameters

Map Map

getStyles

获取样式

Returns Array

getMap

获取地图对象

Returns Map

setMap

设置地图对象

Parameters

Map Map

isAverageCenter

获取单个聚合点位置是否是聚合内所有标记的平均中心

Returns Boolean

setAverageCenter

设置聚合点位置是否是所有聚合点的中心

Parameters

averageCenter Boolean

MassMarks

Extends AMap.Event

海量点类

Parameters

data Array<MassData> 海量点数据参数
- data.lnglat LngLat 经纬度
- data.style number 样式索引值
opts Array<MassMarkersOptions> 海量点参数
- opts.zIndex number 图标 url
- opts.opacity number 图标显示大小
- opts.zooms Vector2 旋转角度
- opts.cursor string 锚点位置
- opts.style (MassMarkersStyleOptions | Array<MassMarkersStyleOptions>) 点展示优先级
  - opts.style.url string 图标 url
  - opts.style.size (Vector2 | Size) 图标显示大小
  - opts.style.rotation number 旋转角度
  - opts.style.anchor Pixel 锚点位置
  - opts.style.zIndex number 点展示优先级，默认为使用样式的索引值。

Examples

// 创建 MassMarks 实例，[亲手试一试](https://lbs.amap.com/api/jsapi-v2/example/marker/massmarks)
var massMarks = new AMap.MassMarks(data, {
    opacity: 0.8,
    zIndex: 111,
    cursor: 'help',
    style: style,
});
// 将海量点实例添加到地图上
map.add(massMarks);

setMap

设置显示MassMark的地图对象

Parameters

map Map

getMap

获取Marker所在地图对象

Returns any

getData

输出MassMark的数据集，数据结构同setDatas中的数据集

Returns Array<MassData>

setData

设置MassMark展现的数据集

Parameters

data Array<MassData>

getStyle

获取MassMark的显示样式

Returns Array<MassMarkersStyleOptions>

setStyle

设置MassMark的显示样式，可设置单个样式或样式列表，每条数据通过设置的样式索引值获取对应样式

Parameters

style (MassMarkersStyleOptions | Array<MassMarkersStyleOptions>)

setOpacity

获取海量点图层的透明度

Returns number

setzIndex

设置海量点图层透明度

Parameters

opacity number 透明度

setzIndex

设置海量点图层叠加顺序

Parameters

zIndex number 叠加顺序

getzIndex

获取海量点图层的透明度

Returns number

getZooms

获取海量点图层可见层级范围

Returns Vector2

setZooms

设置海量点图层可见层级范围

Parameters

zooms Vector2 可见层级范围

show

显示海量点图层

hide

隐藏海量点图层

clear

清除海量点

MoveAnimation

用于实现点标记沿线段或者路径轨迹移动的动画基类，可用于满足轨迹回放、实时轨迹等场景。MoveAnimation无需单独声明或初始化，Marker、Text、LabelMarker均已继承了 MoveAnimation的实现。

moveTo

以给定时间移动点标记到指定位置，加载 AMap.MoveAnimation 后可以使用

Parameters

targetPosition (LngLat | Vector) 指定位置
opts MoveToOptions moveTo 动画参数
- opts.duration number 每段动画持续时长, 单位：ms
- opts.speed number 动画速度，已废弃
- opts.easing EasingCallback easing 时间函数
- opts.autoRotation boolean 覆盖物是否沿路径旋转

Examples

AMap.plugin('AMap.MoveAnimation', function(){
     const animationMarker = new AMap.Marker({
        position: new AMap.LngLat(116.397389,39.909466),
     });
    animationMarker.moveTo([116.397389, 39.909466], {
        duration: 1000,
        delay: 500,
    });
});

moveAlong

以指定的时长，点标记沿指定的路径移动，加载 AMap.MoveAnimation 后可以使用

Parameters

path (Array<LngLat> | Array<Vector> | Array<MoveAlongObj>) 路径数组
opts MoveAlongOptions moveAlong 动画参数可选
- opts.duration (number | AnimationCallback) 每段动画持续时长, 单位：ms
- opts.speed (number | AnimationCallback) 每段动画速度，已废弃
- opts.easing EasingCallback easing 时间函数
- opts.circlable boolean 动画是否循环
- opts.delay (number | AnimationCallback) 延迟动画时长
- opts.aniInterval number 每段完整动画间隔时长
- opts.autoRotation boolean 覆盖物是否沿路径旋转

Examples

const path = [
    new AMap.LngLat(116.397389, 39.909466),
    new AMap.LngLat(116.379707, 39.968168),
    new AMap.LngLat(116.434467, 39.95001),
    new AMap.LngLat(116.46365, 39.979481),
    new AMap.LngLat(116.397389, 39.909466),
];
const customData = [
    { position: path[0], duration: 200 },
    { position: path[1], duration: 400 },
    { position: path[2], duration: 600 },
    { position: path[3], duration: 800 },
    { position: path[4], duration: 1000 },
];
AMap.plugin('AMap.MoveAnimation', function(){
    const animationMarker = new AMap.Marker({
        position: new AMap.LngLat(116.397389,39.909466),
        angle: 90,
    });
    animationMarker.moveAlong(customData);
});

startMove

开启点标记动画，加载 AMap.MoveAnimation 后可以使用

Examples

animationMarker.startMove();

stopMove

停止点标记动画，加载 AMap.MoveAnimation 后可以使用

Examples

animationMarker.stopMove();

resumeMove

重新启动点标记动画，加载 AMap.MoveAnimation 后可以使用

Examples

animationMarker.resumeMove();

AnimationCallback

MoveAnimation 回调函数

Type: function

Parameters

index number 运行到点的索引
data LngLat 当前点经纬度

Returns number

EasingCallback

时间函数回调

Type: function

Parameters

passedTime number 已经过去的时长

Returns number

44 KiB Raw Blame History Unescape Escape

点标记

Marker

Parameters

Examples

getTitle

setTitle

Parameters

getIcon

setIcon

Parameters

getLabel

setLabel

Parameters

getClickable

setClickable

Parameters

getDraggable

setDraggable

Parameters

getTop

setTop

Parameters

getCursor

setCursor

Parameters

getExtData

setExtData

Parameters

remove

moveTo

Parameters

Examples

moveAlong

Parameters

Examples

startMove

Examples

stopMove

Examples

pauseMove

Examples

resumeMove

Examples

getMap

setMap

Parameters

addTo

Parameters

add

Parameters

show

hide

getPosition

setPosition

Parameters

getAnchor

Marker

Parameters

getOffset

setOffset

Parameters

getAngle

setAngle

Parameters

getSize

setSize

Parameters

getzIndex

setzIndex

Parameters

getOptions

getContent

setContent

Parameters

getBounds

Text

Parameters

Examples

getText

44 KiB

Raw Blame History