【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片 ...

摘要：覆盖物，是一张地图的灵魂。有覆盖物的地图，才是完整的地图。在一张地图上，除了底层的底图（瓦片图，矢量图），控件（有功能可操作的工具），最重要最不可缺少的就是覆盖物了。覆盖物有多种，包括，标注、折线、多边形、信息窗口、聚合marker、麻点图和图片覆盖物。本文会详细介绍每一种覆盖物的概念，添加方法，修改方法，移除方法等。最后会提供示例和源代码下载。

示例demo：http://zhaoziang.com/amap/zero_3_1.html

-------------------------------------------------------------------------------------------------

一、标注marker

最常见的覆盖物就是标注（marker），用它可以标示出店铺的位置，你所在的位置，连锁店的分布图等，可以把标注简单理解为1个点。

在地图上增加一个标注，又称之为在地图上“打点”。打点工具在上一章《控件》中已经详细讲解，控件：http://www.cnblogs.com/milkmap/p/3707711.html 。

温馨有爱的小贴士：

标注marker的图片可以是gif图，让marker“动”起来。

1、添加标注——“可爱的赵灵儿”

icon是标注的图片地址，想用什么图片，就把图片地址放在这里。

position是标注的位置，经纬度。

//实例化marker  
function addMarker(){  
    marker=new AMap.Marker({                    
    icon:"zhao.gif",  
    position:new AMap.LngLat(116.405467,39.907761)  
    });  
    marker.setMap(mapObj);  //在地图上添加点  
}

2、修改标注——“一秒钟变拓跋玉儿”

setContent是用于改变文字说明，支持html5；

setPosition是用于改变标注的位置。

marker.setContent(markerContent);//更新点标记内容  
marker.setPosition(new AMap.LngLat(116.391467,39.927761)); //更新点标记位置

3、清除覆盖物

对于制定marker，可以单独清除每一个覆盖物：

marker.setMap(null);

清除地图上全部覆盖物，用：

mapObj.clearMap();

示例demo：http://zhaoziang.com/amap/zero_3_1.html

二、聚合marker

1、增加一个marker

温馨小贴士：

不如icon的值为空，就会调用高德默认的marker哟，也蛮漂亮的。

function addMarker2(){
    marker2 = new AMap.Marker({  
        position:(new AMap.LngLat(116.384182,39.916451)),  
        draggable:true, //[OHXXYYNLN
O[[[OHXXYYN[[[OHXXYYN

[[[OHXXYYNJNK[[[OHXXYYNL[[[OHXXYYNN[[[OHXXYYN[[[OHXXYYNX\\]SX\]
LN
K

JN[[[OHXXYYNB[[[OH[[[OH\[[[OH[[[OH[[[OH[[[[OH[O]]