高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)

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

当然，这些功能高德地图都为我们准备了，比如常用的地图覆盖物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
    });