使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记。
当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等。这里就先说一下点标记的Marker。
Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上,你可以为标注指定任意的Icon或者内容,以及文字Label。下面向大家介绍如何使用Marker来构建一个丰富的地图应用。
建立一个最简单的Marker标记,我们只需要设置两个参数,分别是他的经纬度位置和所要添加到的map对象。
position是要添加的marker的经纬度,可以使用LngLat对象,如 new AMap.LngLat(116.39,39.9);
也可以直接使用经度和纬度构成的一次二元数组,如[116.39,39.9]。
一、首先还是要加载地图;
var map = new AMap.Map('container',{
resizeEnable: true, //可缩放
zoom:12, //缩放级别
center:[119.1664,29.02523] //位置中心点
});
二、加载Marker
marker = new AMap.Marker({
position: [lng,lat], //点标记在地图上显示的位置,默认为地图中心点
offset: new AMap.Pixel(-16,-45),//位置偏移量,默认值为Pixel(-10,-34),(0,0)时marker左上角对准position的位置
title: data[i].number, //鼠标滑过标记时的文字提示,不设置则鼠标滑过时没有文字提示
map: map //要显示该Marker的地图对象
});
这样就完成了基本的的点标记
介绍一下关于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
marker = new AMap.Marker({
icon: "http://vdata.amap.com/icons/b18/1/2.png", //自定义Icon在项目中的位置
position: [lng,lat],
offset: new AMap.Pixel(-16,-45),
title: data[i].number,
map: map
});
但是通常我们使用Icon类来设置marker的icon,因为icon的大小通常和默认marker的大小不一致,对于使用组合图片的开发的来说,这种当时是最合适的,可以通过imageOffset属性来调整图片的显示区域。
这是官方的Demo
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 : map
});
这是我自己项目里面写的代码,根据不同的需求,加载不同的图标,仅供参考
if(operNum < 0.2*maxNumber){
var icon = new AMap.Icon({
image: 'images/bike/green.png',
size: new AMap.Size(32, 45)
});
}
marker = new AMap.Marker({
icon: icon,
position: [lng,lat],
offset: new AMap.Pixel(-16,-45),
title: data[i].number+":"+data[i].name+":总数"+data[i].restorecount+":在架"+data[i].rentcount,
map: map
});
这样就可以使用循环去加载地图上的多个Marker
参数说明:
参数名称 | 类型 | 说明 |
---|
size | Size | 图标尺寸,默认值(36,36) |
imageOffset | Pixel | 图标取图偏移量。当image使用了图片精灵时,可通过size和imageOffset配合,显示图标的指定范围 |
image | String | 图标的取图地址。默认为蓝色图钉图片 |
imageSize | Size | 修改原始图片的大小,将拉伸或压缩图片,等同于CSS中的background-size属性。可用于实现高清屏的高清效果 |
使用Content方式标记
content属性用来指定作为标记的dom节点或者dom节点的outerHTML,这里使用一个div作为content来为marker多添加一个标记
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: map
});