示例中心
功能在线体验
控制台

高德 开发 地图 JS API 开发指南 在地图上绘制 点标注

更新时间:2018年04月03日

亲手试一试

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

多种Marker样式在地图上进行标注

假设我们想在地图上将全国的省份都用marker标注出来。这里我们使用了一个对象数组来描述全中国的省市信息,通过JS标签的形式引用到页面中来,每个省市的信息包括省市名称、省会位置、类别等。类别包括首都、省、特别行政区种。我们将根据类别,使用不同的方法来为为标记设定不同的样式。

创建地图对象

     
var mapObj = new AMap.Map('container',{zoom:5});
var markers = [];   //provinces见Demo引用的JS文件
for(var i = 0; i < provinces.length; i += 1){
    //TODO 根据类别创建不同样式的marker
}

使用默认图标来标注一般省份

建立一个最简单的Marker标记,我们只需要设置两个参数,分别是他的经纬度位置和所要添加到的map对象。position是要添加的marker的经纬度,可以使用LngLat对象,如 new AMap.LngLat(116.39,39.9);也可以直接使用经度和纬度构成的一次二元数组,如[116.39,39.9]。title的作用同css。

marker = new AMap.Marker({
position: provinces[i].center.split(','),
title: provinces[i].name,
map: mapObj
    });

或者

marker = new AMap.Marker({
position: provinces[i].center.split(','),
title: provinces[i].name
    });
marker.setMap(mapObj);

参数名称

类型

说明

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

获取用户自定义属性

使用自定义Icon来标注北京

作为中国的首都,我们使用一个五角星的图标,来进行北京的标注, 我们可以使用字符串来指定图标icon的url,

var marker = new AMap.Marker({
        icon : 'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px
        position : provinces[i].center.split(','),
        offset : new AMap.Pixel(-12,-12),
        map : mapObj
});

但通常我们使用Icon类来设置marker的icon,因为icon的大小通常和默认marker的大小不一致,对于使用了组合图片的开发者来说,这种方式也是最合适的,可以通过增加imageOffset属性来调整图片的显示区域:

var icon = new AMap.Icon({
        image : 'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px
        //icon可缺省,缺省时为默认的蓝色水滴图标,
        size : new AMap.Size(24,24)
});
var marker = new AMap.Marker({
        icon : icon,//24px*24px
        position : provinces[i].center.split(','),
        offset : new AMap.Pixel(-12,-12),
        map : mapObj
});

参数名称

类型

说明

size

Size

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

imageOffset

Pixel

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

image

String

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

imageSize

Size

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

使用content方式来标记

对于更加复杂的marker展示,我们可以使用Marker的content属性,content属性用来指定作为标记的dom节点或者dom节点的outerHTML。这里我们用一个div作为content来给台湾省多增加一个标记:

var content= "<div classname="taiwan">宝岛台湾</div>";
//或者
var content = document.createElement('div');
content.innerHTML = '宝岛台湾';
content.className = 'taiwan';

marker = new AMap.Marker({
content: content,
position: provinces[i].center.split(','),
title: provinces[i].name,
offset: new AMap.Pixel(-10,0),
map: mapObj
    });

Marker多级展示

在地图应用开发过程中,我们经常会碰到marker过多需要聚合,或者需要分级展示的情况。让我们在上面的实例基础上进一步的扩展开发,设想这么一种场景,除了对省级单位进行展示之外,我们还想展示出所有的市一级单位,甚至区县一级的行政单位,由于这些单位数目众多,同时在地图上进行展示的话将无法辨认。因此我们期望当地图等级变化或者点击了某个省级单位的时候显示其下属的所有市一级行政单位。

数据准备

在上面的demo使用的provinces数据的技术上我们以北京为例子为其添加下级的行政单位信息,下级单位的信息包括name和center两个字段。同时为了我们的Demo更加接近实际应用,我们为每个行政单位都加了一个count字段,作为一种抽象的描述,实际使用中,它可以代表当前Marker点所包含的某种信息的数量,比如:某公司在北京市有多少分店,某中介公司在北京有多少房源等等。

Marker的构建

为了更生动的模仿实际使用场景,我们用不同颜色的圆形来表示count的大小分别,同时在圆形之上我们标出count的数值,这里我们使用content来生成marker内容,下面是我们创建Marker的函数:

var createMarker = function(data,hide) {
    var div = document.createElement('div');
    div.className = 'circle';
    var r = Math.floor(data.count / 1024);
    div.style.backgroundColor = 'rgb('+r*8+',100,255)';
    div.innerHTML = data.count || 0;
    var marker = new AMap.Marker({
        content: div,
        title:data.name,
        position: data.center.split(','),
        offset: new AMap.Pixel(-30, 5),
        zIndex: data.count
    });
    marker.subMarkers = [];
    if(!hide){
        marker.setMap(mapObj)
    }
    if(data.subDistricts&&data.subDistricts.length){
        for(var i = 0 ; i < data.subDistricts.length; i += 1){
            marker.subMarkers.push(createMarker(data.subDistricts[i],true));
        }
    }
    return marker;
}

绑定事件完成交互

这里,我们为每个省级的Marker绑定一个click事件。当Marker点被点击的时候,我们将显示其下级的Marker标记,setFitView方法用来将地图调整到合适的范围来显示我们需要展示的markers。

var _onClick = function(e){
    if(e.target.subMarkers){
        mapObj.add(e.target.subMarkers);
        mapObj.setFitView(e.target.subMarkers);
        mapObj.remove(markers)
    }
}
AMap.event.addListener(marker, 'click', _onClick);
//单击右侧demo中北京和河南省的标注试试看~

同时为地图绑定一个zoomend事件,当地图缩放结束后停留的级别小于8的时候将溢出所有市一级的标记:

var _onZoomEnd = function(e) {
    if (mapObj.getZoom() < 8) {
        for (var i = 0; i < markers.length; i += 1) {
            mapObj.remove(markers[i].subMarkers)
        }
    }
    }
AMap.event.addListener(mapObj, 'zoomend', _onZoomEnd);

参数名称

类型

说明

click

MapsEvent

鼠标左键单击事件

dblclick

MapsEvent

鼠标左键双击事件

rightclick

MapsEvent

鼠标右键单击事件

mousemove

MapsEvent

鼠标移动

mouseover

MapsEvent

鼠标移入点标记时触发事件

mouseout

MapsEvent

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

mousedown

MapsEvent

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

mouseup

MapsEvent

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

dragstart

MapsEvent

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

dragging

MapsEvent

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

dragend

MapsEvent

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

moving


点标记在执行moveTo,moveAlong动画时触发事件

moveend


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

movealong


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

touchstart

MapsEvent

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

touchmove

MapsEvent

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

touchend

MapsEvent

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

 运用UI组件库实现Marker

SimpleMarker

UI组件库提供了 SimpleMarker 内容,其继承自AMap.Marker,在已有功能的基础上,额外增加如下的支持:

  1. 支持设置背景图标(iconStyle)和前景文字(iconLabel);背景图标内置有20种颜色,也支持图片地址或者Dom结构。
  2. 支持显示定位点,用于开发阶段,辅助开发者设置Marker图标相对于经纬度的显示偏移量。

AwesomeMarker

AwesomeMarker 继承自 SimpleMarker ,支持使用 Font Awesome 标识 SimpleMarker 的前景内容。

SvgMarker

SvgMarker 继承自 SimpleMarker ,支持使用Svg构建不同形状,颜色,大小的背景图标(利用 SimpleMarker 的 iconStyle)。


移动端
示例中心
功能
在线体验
常见问题