使用高德地图在很多时候需要在地图上标记位置，并且很多时候需要用到自定义的图标去完成这种位置的标记。

当然，这些功能高德地图都为我们准备了，比如常用的地图覆盖物Marker和信息窗体等。这里就先说一下点标记的Marker。

Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上，你可以为标注指定任意的Icon或者内容，以及文字Label。下面向大家介绍如何使用Marker来构建一个丰富的地图应用。

建立一个最简单的Marker标记，我们只需要设置两个参数，分别是他的经纬度位置和所要添加到的map对象。

position是要添加的marker的经纬度，可以使用LngLat对象，如 new AMap.LngLat(116.39,39.9);

也可以直接使用经度和纬度构成的一次二元数组，如[116.39,39.9]。

一、首先还是要加载地图；

介绍一下关于Marker的一些方法：

参数名称

类型

说明

map

Map

要显示该marker的地图对象

position

LngLat

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

offset

Pixel

位置偏移量，默认值为Pixel(-10,-34)。(0,0)时marker左上角对准position的位置，

该属性表示将marker移动多少像素之后，可以使锚点对准position

icon

String/Icon

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

content

String/Object

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

topWhenClick

Boolean

鼠标点击时marker是否置顶，默认false ，不置顶（自v1.3 新增）

topWhenMouseOver

Boolean

鼠标移进时marker是否置顶，默认false，不置顶（自v1.3 新增）

draggable

Boolean

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

raiseOnDrag

Boolean

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

cursor

String

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

visible

Boolean

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

zIndex

Number

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

angle

Number

点标记的旋转角度支持IE9及以上版本

autoRotation

Boolean

是否自动旋转。点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认false，

IE8以下不支持

animation

String

点标记的动画效果，默认值：“AMAP_ANIMATION_NONE”。

可选值：

“AMAP_ANIMATION_NONE”，无动画效果；

“AMAP_ANIMATION_DROP”，点标掉落效果；

“AMAP_ANIMATION_BOUNCE”，点标弹跳效果

shadow

Icon

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

title

String

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

clickable

Boolean

点标记是否可点击

bubble

Boolean

默认false，true的时候事件可以穿透到地图

shape

MarkerShape

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

extData

Any

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

Marker的方法

方法

返回值

说明

getOffset( )

Pixel

获取Marker偏移量（自v1.3 新增）

setOffset(offset:Pixel)

设置Marker偏移量（自v1.3 新增）

setAnimation(animate:String )

设置点标记的动画效果

getAnimation( )

String

获取点标记的动画效果类型

setClickable(clickable:Boolean )

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

getClickable( )

Boolean

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

getPosition( )

LngLat

获取点标记的位置

setPosition(lnglat:LngLat)

设置点标记位置

setAngle(angle:Number)

设置点标记的旋转角度

getAngle()

Number

获取点标记的旋转角度

setzIndex(index:Number)

设置点标记的叠加顺序，默认最先添加的点标记在最底层

setIcon(content:String/Icon)

设置点标记的显示图标

getIcon( )

String /Icon

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

setDraggable(draggable:Boolean)

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

getDraggable( )

Boolean

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

hide( )

点标记隐藏

show( )

点标记显示

setCursor(Cursor)

String

设置鼠标悬停时的光标。 参数cur可为CSS标注中的光标样式

setContent(html:String|htmlDOM)

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

getContent( )

String

获取点标记内容

moveAlong(lnglatlist,speed,f,circlable)

以指定的速度，点标记沿指定的路径移动。

参数lnglats为路径坐标串；speed为指定速度，单位：千米/小时；

回调函数f中可添加自定义功能；参数loop表明是否循环执行动画，默认为false

moveTo(lnglat,speed,Function)

以给定速度移动点标记到指定位置。

参数lnglat为指定位置，必设；speed为指定速度，单位：千米/小时；

回调函数f中添加自定义功能

stopMove( )

点标记停止动画

setMap(map:Map)

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

getMap()

Map

获取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(shape:MarkerShape)

设置marker的可点击区域

getShape( )

MarkerShape

获取marker的可点击区域

setExtData(ext:Any)

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

getExtData( )

Any

获取用户自定义属性

接下来就说一下使用自定义图标的方法，就是上述第二步稍微修改一下即可。

使用自定义Marker需要自定义Icon

这是官方的Demo

参数说明：

参数名称

类型

说明

size

Size

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

imageOffset

Pixel

图标取图偏移量。当image使用了图片精灵时，可通过size和imageOffset配合，显示图标的指定范围

image

String

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

imageSize

Size

修改原始图片的大小，将拉伸或压缩图片，等同于CSS中的background-size属性。可用于实现高清屏的高清效果

content属性用来指定作为标记的dom节点或者dom节点的outerHTML，这里使用一个div作为content来为marker多添加一个标记