js添加多marker 高德地图_覆盖物-参考手册-地图 JS API | 高德地图API

覆盖物

覆盖物是指叠加在地图底图之上的一些常见要素，包括

Marker类

点标记。 构造函数 说明

AMap.Marker( 构造一个点标记对象，通过MarkerOptions设置点标记对象的属性

MarkerOptions 类型 说明

map 要显示该marker的地图对象

position 点标记在地图上显示的位置，默认为地图中心点

anchor String 设置点标记锚点。

默认值：'top-left'

可选值：'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right'

(自v1.4.13 新增)

offset 点标记显示位置偏移量，默认值为Pixel(-10,-34)。Marker指定position后，默认以marker左上角位置为基准点(若设置了anchor，则以anchor设置位置为基准点)，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量。

icon String/Icon 需在点标记中显示的图标。可以是一个本地图标地址，或者Icon对象。有合法的content内容时，此属性无效

content String/Object 点标记显示内容，可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖

topWhenClick Boolean 鼠标点击时marker是否置顶，默认false ，不置顶

(自v1.3 新增)

bubble Boolean 是否将覆盖物的鼠标或touch等事件冒泡到地图上

(自v1.3 新增)

默认值：false

draggable Boolean 设置点标记是否可拖拽移动，默认为false

raiseOnDrag Boolean 设置拖拽点标记时是否开启点标记离开地图的效果

cursor String 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor

visible Boolean 点标记是否可见，默认为true

zIndex Number 点标记的叠加顺序。地图上存在多个点标记叠加时，通过该属性使级别较高的点标记在上层显示

默认zIndex：100

angle Number 点标记的旋转角度，广泛用于改变车辆行驶方向

注：angle属性是使用CSS3来实现的，支持IE9及以上版本

autoRotation Boolean 是否自动旋转。点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。广泛用于自动调节车辆行驶方向。

IE8以下不支持旋转，autoRotation属性无效

animation String 点标记的动画效果，默认值：

“AMAP_ANIMATION_NONE”

可选值：

“AMAP_ANIMATION_NONE”，无动画效果

“AMAP_ANIMATION_DROP”，点标掉落效果

“AMAP_ANIMATION_BOUNCE”，点标弹跳效果

shadow 点标记阴影，不设置该属性则点标记无阴影

title String 鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示

clickable Boolean 点标记是否可点击

shape 设置Marker的可点击区域，在定义的区域内可触发Marker的鼠标点击事件

extData Any 用户自定义属性，支持JavaScript API任意数据类型，如Marker的id等

label {content,offset,direction} 添加文本标注。content 为文本标注的内容。direction 为文本标注方位(自 v1.4.14 新增属性)，可选值：'top'|'right'|'bottom'|'left'|'center'，默认值：'top' 。offset 为偏移量(默认基准点为图标左上角)，如设置了 direction，以 direction 方位为基准点进行偏移。相关示例

方法 返回值 说明

markOnAMAP(obj:Object) 唤起高德地图客户端标注页

其中Object里面包含有{ name:String,name属性 必要参数

position:

LngLat 坐标点

}

getAnchor( ) String 获取Marker锚点

(自v1.4.13 新增)

setAnchor(anchor:String) 设置Marker锚点

可选值：'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right'

(自v1.4.13 新增)

getOffset( ) 获取Marker偏移量

(自v1.3 新增)

setOffset(offset:Pixel) 设置Marker偏移量

(自v1.3 新增)

setAnimation(animate:String) 设置点标记的动画效果，默认值：

“AMAP_ANIMATION_NONE”

可选值：

“AMAP_ANIMATION_NONE”，无动画效果

“AMAP_ANIMATION_DROP”，点标掉落效果

“AMAP_ANIMATION_BOUNCE”，点标弹跳效果

getAnimation( ) String 获取点标记的动画效果类型

setClickable(clickable:Boolean) 设置点标记是支持鼠标单击事件

getClickable( ) Boolean 获取点标记是否支持鼠标单击事件

getPosition( ) 获取点标记的位置

setPosition(lnglat:LngLat) 设置点标记位置

setAngle(angle:Number) 设置点标记的旋转角度

setLabel(label:Object) 设置点标记文本标签内容相关示例

getLabel() Object 获取点标记文本标签内容

getAngle() Number 获取点标记的旋转角度

setzIndex(index:Number) 设置点标记的叠加顺序，默认最先添加的点标记在最底层

getzIndex() Number 获取点标记的叠加顺序

setIcon(content:String/Icon) 设置点标记的显示图标。

参数image可传入String、Icon两种类型的值。

若为String(图片url)，表示点标记以指定图片形式显示；若为Icon，表示点标记以Icon对象形式显示

getIcon( ) String

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

setDraggable(draggable:Boolean) 设置点标记对象是否可拖拽移动

getDraggable( ) Boolean 获取点标记对象是否可拖拽移动

hide( ) 点标记隐藏

show( ) 点标记显示

setCursor(Cursor) String 设置鼠标悬停时的光标。 参数cur可为CSS标注中的光标样式，如：

setCursor(“pointer”)等；或者自定义的光标样式，如：

setCursor("url('https://webapi.amap.com/images/0.png') ,pointer")

注：当浏览器不支持css2，url值不起作用，鼠标样式就按pointer来设置

setContent(html:String|htmlDOM) 设置点标记显示内容，可以是HTML要素字符串或者HTML DOM对象

getContent( ) String 获取点标记内容

moveAlong(path:Array,

speed:Number,f:Function,circlable:Boolean) 以指定的速度，点标记沿指定的路径移动。参数path为轨迹路径的经纬度对象的数组；speed为指定速度，单位：千米/小时，不可为0；

回调函数f为变化曲线函数，缺省为function(k){return k}；参数circlable表明是否循环执行动画，默认为false

moveTo(lnglat:LngLat,speed:Number,f:Function) 以给定速度移动点标记到指定位置。参数lnglat为指定位置，必设；speed为指定速度，单位：千米/小时，不可为0；回调函数f为变化曲线函数，缺省为function(k){return k}。

stopMove( ) 点标记停止动画

pauseMove() 暂定点标记的动画效果

resumeMove() 重新开始点标记的动画效果

setMap(map:Map) 为Marker指定目标显示地图。当参数值取null时，地图上移除当前Marker：setMap(null)

getMap() 获取Marker所在地图对象

setTitle(title:String) 鼠标滑过点标时的文字提示

getTitle( ) String 获取点标记的文字提示

setTop(isTop:Boolean) 地图上有多个marker时，当isTop为true时，marker将显示在最前面；当为false时，marker取消置顶

getTop( ) Boolean

setShadow(icon:Icon) 为marker设置阴影效果

getShadow( ) Icon 获取marker的阴影图标

setShape( 设置marker的可点击区域

getShape( ) 获取marker的可点击区域

setExtData(ext:Any) 设置用户自定义属性，支持JavaScript API任意数据类型，如Marker的id等

getExtData( ) Any 获取用户自定义属性

事件 参数 说明

click 鼠标左键单击事件

dblclick 鼠标左键双击事件

rightclick 鼠标右键单击事件

mousemove 鼠标移动

mouseover 鼠标移近点标记时触发事件

mouseout 鼠标移出点标记时触发事件

mousedown 鼠标在点标记上按下时触发事件

mouseup 鼠标在点标记上按下后抬起时触发事件

dragstart 开始拖拽点标记时触发事件

dragging 鼠标拖拽移动点标记时触发事件

dragend 点标记拖拽移动结束触发事件

moving Object 点标记在执行moveTo，moveAlong动画时触发事件，Object对象的格式是{passedPath:Array.}。其中passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径。

moveend 点标记执行moveTo动画结束时触发事件，也可以由moveAlong方法触发

movealong 点标记执行moveAlong动画一次后触发事件

touchstart 触摸开始时触发事件，仅适用移动设备

touchmove 触摸移动进行中时触发事件，仅适用移动设备

touchend 触摸结束时触发事件，仅适用移动设备

MarkerShape

MarkerShape用于划定Marker的可点击区域范围。自定义区域和Marker重叠的部分，可以触发Marker的点击事件。需要注意的是，在IE浏览器中图标透明区域默认为不触发事件，因此MarkerShape在IE中不起作用。 构造函数 说明

AMap.MarkerShape( 构造一个Marker可点击区域对象，通过MarkerShapeOptions设置可点击区域属性

MarkerShapeOptions 类型 说明

coords Array. 可点击区域组成元素数组，存放图形的像素坐标等信息，该数组元素由type决定：

- circle:coords格式为 [x1, y1, r]，x1，y1为圆心像素坐标，r为圆半径

- poly: coords格式为 [x1, y1, x2, y2 … xn, yn]，各x，y表示多边形边界像素坐标

- rect: coords格式为 [x1, y1, x2, y2]，x1，y1为矩形左上角像素坐标，x2，y2为矩形右下角像素坐标

Markshape的像素坐标是指相对于marker的左上角的像素坐标偏移量

type String 可点击区域类型，可选值：

- circle:圆形

- poly:多边形

- rect:矩形

Icon类

表示点标记的图标

用于添加复杂点标记，即在普通点标记的基础上，添加Icon类，通过在Icon表示的大图上截取其中一部分作为标注的图标 相关示例 构造函数 说明

AMap.Icon( 构造点覆盖物图标，通过IconOptions设置图标属性

IconOptions 类型 说明

size 图标尺寸，默认值(36,36)

imageOffset 图标取图偏移量。当image中指定了一个大图时，可通过size和imageOffset配合，显示图标的指定范围

image String 图标的取图地址。默认为蓝色图钉图片

imageSize 图标所用图片大小，根据所设置的大小拉伸或压缩图片，等同于CSS中的background-size属性。可用于实现高清屏的高清效果 方法 返回值 说明

getImageSize( ) Size 获取图标图片大小

setImageSize(size:Size) 设置图标图片大小

ElasticMarker

灵活点标记，一种可以随着地图级别变化而改变图标和大小的点标记，插件类。查看示例

构造函数 说明

AMap.ElasticMarker( 构造一个灵活点标记对象，通过ElasticMarkerOptions设置点标记对象的属性

ElasticMarkerOptions 类型 说明

styles Array 多个不同样式的数组，每个样式形如：

{

icon:{

img:'./a,png',

size:[16,16],//图标的原始大小

ancher:[8,16],//锚点，图标原始大小下锚点所处的位置，相对左上角

imageOffset:[360,340],