【⾼德地图API】从零开始学⾼德JSAPI（三）覆盖物——标注折线多边形信息窗
⼝聚合mar。。。
摘要：覆盖物，是⼀张地图的灵魂。有覆盖物的地图，才是完整的地图。在⼀张地图上，除了底层的底图（⽡⽚图，⽮量图），控件（有功能可操作的⼯具），最重要最不可缺少的就是覆盖物了。覆盖物有多种，包括，标注、折线、多边形、信息窗⼝、聚合marker、⿇点图和图⽚覆盖物。本⽂会详细介绍每⼀种覆盖物的概念，添加⽅法，修改⽅法，移除⽅法等。最后会提供⽰例和源代码下载。
-------------------------------------------------------------------------------------------------
⼀、标注marker
最常见的覆盖物就是标注（marker），⽤它可以标⽰出店铺的位置，你所在的位置，连锁店的分布图等，可以把标注简单理解为1个点。
温馨有爱的⼩贴⼠：
标注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.tMap(mapObj); //在地图上添加点
}
2、修改标注——“⼀秒钟变拓跋⽟⼉”
tContent是⽤于改变⽂字说明，⽀持html5；
tPosition是⽤于改变标注的位置。
marker.tContent(markerContent);//更新点标记内容
marker.tPosition(new AMap.LngLat(116.391467,39.927761)); //更新点标记位置
3、清除覆盖物
对于制定marker，可以单独清除每⼀个覆盖物：
吸油烟机哪种好marker.tMap(null);
清除地图上全部覆盖物，⽤：
mapObj.clearMap();
⼆、聚合marker
1、增加⼀个marker
温馨⼩贴⼠：
不如icon的值为空，就会调⽤⾼德默认的marker哟，也蛮漂亮的。
支部委员会议记录function addMarker2(){
marker2 = new AMap.Marker({
position:(new AMap.LngLat(116.384182,39.916451)),
draggable:true, //点标记可拖拽
cursor:'move' //⿏标悬停点标记时的⿏标样式
});
marker2.tMap(mapObj);
}
2、给marker加上动画
跳动动画
function marker2Cartoon(){
marker2.tAnimation('AMAP_ANIMATION_BOUNCE'); //设置点标记的动画效果，此处为弹跳效果
}
拖拽动画
拖拽动画需要在marker⾥⾯设置。
function addMarker2(){
marker2 = new AMap.Marker({
position:(new AMap.LngLat(116.384182,39.916451)),
draggable:true, //点标记可拖拽
cursor:'move',
raiOnDrag:true//⿏标拖拽点标记时开启点标记离开地图的效果
});
marker2.tMap(mapObj);
}
3、聚合marker
增加⼀群marker，就是聚合marker
温馨⼩贴⼠：为什么要使⽤聚合marker？
当marker⼤于500的时候，满屏幕都是密密⿇⿇的marker了，显得杂乱⽆章。
⽽且由于浏览器性能的关系，特别是IE6浏览器，会造成浏览器卡死的情况。
这个时候，使⽤⿇点图或者聚合marker就可以轻松解决marker数量太多的问题。
增加⼀群marker：
function iJuhe(){
mapObj.clearMap();
// 随机向地图添加500个标注点
var mapBounds = Bounds();
var sw = SouthWest();
var ne = NorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 500; i ++) {
var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1),ne.lat - latSpan * (Math.random() * 1));
var marker = new AMap.Marker({
map:mapObj,
position:markerPosition, //基点位置
icon:"js_marker.png", //marker图标，直接传递地址url火字偏旁的字
offt:{x:-8,y:-34} //相对于基点的位置
});
markers.push(marker);
}
}
增加marker聚合的功能：
function addCluster(tag)
{
if(cluster) {
cluster.tMap(null);
}
if(tag==1) {
var sts=[{url:"js_1.png",size:new AMap.Size(32,32),offt:new AMap.Pixel(-16,-30)},
{url:"js_2.png",size:new AMap.Size(32,32),offt:new AMap.Pixel(-16,-30)},
{url:"js_3.png",size:new AMap.Size(48,48),offt:new AMap.Pixel(-24,-45), textColor:'#CC0066'}];
mapObj.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(mapObj,markers,{styles:sts});
});
}
el {
mapObj.plugin(["AMap.MarkerClusterer"],function(){
cluster = new AMap.MarkerClusterer(mapObj,markers);
});
}
}
缩⼩地图，marker会变得更加集中。
增加⼀个延时延时的功能，先添加500的marker，⼀秒钟后变成聚合marker。
tTimeout(function(){
addCluster(0); e
},1000);
三、⿇点图
⾼德云图是实时渲染的，在后台更改数据后，能在前台直观的看到数据展⽰。
免去了切图啊，制作⽡⽚图，对准经纬度等⼀系列的⿇烦。
点击创建地图
2、导⼊数据
⼿⼯导⼊数据，可视化⼀站式操作，适合少量点：
⾃动导⼊数据，适合⼤批量数据：
温馨⼩贴⼠：
第⼀⾏必须是字段名，只能是字母、数字和下划线，并且不能以数字开头。
经纬度必须分开成2个字段！
⽂件只⽀持 .csv 格式、UTF-8编码，数据量不超过 10,000 条，⽂件⼤⼩不超过10M、字段总数不超
过 40 个。字段命名规则：以英⽂字母开头，仅由英⽂字母、数字、下划线组成，字段名长度不超过20位。
创建表格数据，可以打开⼀个记事本，编码改为UFT-8模式。然后导⼊数据。
tag,name,lng,lat,tel,content
免费停车场，免费停车场001,116.430359,39.958175,010-********，停过5次没贴条
免费停车场，免费停车场002,116.279297,40.00132,010-********，停过1次没贴条
免费停车场，免费停车场003,116.202393,39.825413,010-********，停过2次没贴条
免费停车场，免费停车场004,116.564941,39.835959,010-********，停过7次没贴条
免费停车场，免费停车场005,116.437225,39.806426,010-********，停过20次没贴条
数据导⼊后，就是这样⼦的。⼤家点击预览，就可以获取⼀个url了。
然后⼤家可以直接⽤iframe的形式，把标注好的地图放到⾃⼰的⽹站上。云图实时渲染：
<iframe src="/share/MZVB3y"></iframe>
接下来，⼤家如果要使⽤云索引，云检索，使⽤这个教程：
四、折线，⾏车记录仪，轨迹回放
1、折线
function addLine(){
var lineArr=new Array();//创建线覆盖物节点坐标数组
lineArr.push(new AMap.LngLat("116.368904","39.913423"));
lineArr.push(new AMap.LngLat("116.382122","39.901176"));
lineArr.push(new AMap.LngLat("116.387271","39.912501"));
lineArr.push(new AMap.LngLat("116.398258","39.904600"));
polyline=new AMap.Polyline({
path:lineArr, //设置线覆盖物路径
strokeColor:"#3366FF", //线颜⾊
strokeOpacity:1, //线透明度
strokeWeight:5, //线宽
strokeStyle:"solid", //线样式
strokeDasharray:[10,5] //补充线样式
});
polyline.tMap(mapObj);
}
2、让轨迹动起来
3、让轨迹暂停
marker3.stopMove(); //暂停轨迹回放
五、圆形，多边形
圆形爱情天使
//添加圆覆盖物
function addCircle() {
circle = new AMap.Circle({
center:new AMap.LngLat("116.403322","39.920255"),// 圆⼼位置
嘴巴上长痣radius:10000, //半径
strokeColor: "#F33", //线颜⾊
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜⾊
fillOpacity: 0.35//填充透明度
});
circle.tMap(mapObj);
}
多边形
//添加多边形覆盖物
function addPolygon(){
var polygonArr=new Array();//多边形覆盖物节点坐标数组
polygonArr.push(new AMap.LngLat("116.319809","39.956596"));
polygonArr.push(new AMap.LngLat("116.556702","39.983434"));
polygonArr.push(new AMap.LngLat("116.483917","39.845449"));
polygonArr.push(new AMap.LngLat("116.244278","39.848612"));
polygon=new AMap.Polygon({
path:polygonArr,//设置多边形边界路径
strokeColor:"#0000ff", //线颜⾊
strokeOpacity:0.2, //线透明度
strokeWeight:3, //线宽
fillColor: "#f5deb3", //填充⾊
fillOpacity: 0.35//填充透明度
});
polygon.tMap(mapObj);
}
六、信息窗⼝
//在指定位置打开默认信息窗体
function openInfo(){
//构建信息窗体中显⽰的内容
var info = [];
info.push("<div><div><img style=\"float:left;\" src=\" /images/autonavi.png \"/></div> ");
info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>⾼德软件</b>");
info.push("电话 : 010-******** 邮编 : 100102");
info.push("地址 : 北京市望京⾩通东⼤街⽅恒国际中⼼A座16层</div></div>");
inforWindow = new AMap.InfoWindow({
content:info.join("<br/>") //使⽤默认信息窗体框样式，显⽰信息内容
});
inforWindow.open(mapObj,new AMap.LngLat(116.373881,39.907409));
}
2、⾃定义信息窗⼝
//实例化信息窗体
var infoWindow2 = new AMap.InfoWindow({
isCustom:true, //使⽤⾃定义窗体
content:createInfoWindow('⽅恒假⽇酒店 <span >价格:318</span>',"<img src='/simgad/5843493769827749134' style='float:left;margin:0 5px 5px 0;'>地址：北京市 size:new AMap.Size(300, 0),
offt:new AMap.Pixel(0, -50)//-113, -140
});
//关闭信息窗体
function cloInfoWindow(){
小孩放鞭炮简笔画mapObj.clearInfoWindow();
}
//构建⾃定义信息窗体
function createInfoWindow(title,content){
var info = ateElement("div");
info.className = "info";
// 定义顶部标题
var top = ateElement("div");
top.className = "info-top";
var titleD = ateElement("div");
titleD.innerHTML = title;
var cloX = ateElement("img");
cloX.src = "clo2.gif";
top.appendChild(titleD);
top.appendChild(cloX);
info.appendChild(top);
// 定义中部内容
var middle = ateElement("div");
middle.className = "info-middle";
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
var bottom = ateElement("div");
bottom.className = "info-bottom";
var sharp = ateElement("img");
sharp.src = "sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
function myWindow(){
infoWindow2.open(mapObj,new AMap.LngLat(116.373881,39.907409));
}
⾃定义信息窗⼝，需要CSS样式⽀持
/* 定义⾃定义信息窗体样式 */
div.info {position: relative;z-index: 100;border: 1px solid #BCBCBC;box-shadow: 0 0 10px;#B7B6B6;border-radius: 8px;background-color: rgba(255,255,255,0.9);transition-duration: 0.25s;}
div.info:hover {box-shadow: 0px 0px 15px #0CF;}
div.info-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius:5px 5px 0 0;}
div.info-top div {display: inline-block;color: #333333;font-size:14px;font-weight:bold; line-height:31px;padding:0 10px;}
div.info-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;}
div.info-top img:hover{box-shadow: 0px 0px 5px #000;}
div.info-middle {font-size:12px;padding:10px;line-height:21px;}
div.info-bottom {height:0px;width:100%;clear:both;text-align:center;}
div.info-bottom img{position: relative;z-index:104;}
七、厦门⿎浪屿地图
⼤家可以使⽤图⽚覆盖物，实现各种园区图，⼚区图，校园图，⼿绘风格地图等。
在⽹上找好⼿绘地图，我找到的是⿎浪屿⼿绘地图。把它扣空，做成png-24的透明图⽚。
然后确定图⽚的左下⾓和右上⾓。把图⽚贴上去。效果不错。
function xmMap(){
mapObj.tZoom(15);
var bounds = new AMap.Bounds(new AMap.LngLat(118.055005,24.435624), new AMap.LngLat(118.078351,24.454299)),
groundImageOpts = {
opacity: 1, //图⽚透明度
clickable: true,//图⽚相应⿏标点击事件，默认：fal
map: mapObj //图⽚叠加的地图对象
};
//实例化⼀个图⽚覆盖物对象
var groundImage = new AMap.GroundImage('gly.png', bounds, groundImageOpts);
mapObj.tCenter(new AMap.LngLat(118.067665,24.443946));
}
⼋、源代码与⽰例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; chart=utf-8">
<link rel="stylesheet" type="text/css" href="zero.css"/>
<script language="javascript" src="/maps?v=1.2&key=23e8cfe2d8f3ce1e4a4197902d28f445"></script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
<div id="iControlbox">
<p>坐标：<span id="lnglat"> </span></p>
<ul>
<li><button onclick="javascript:addMarker();">添加marker</button><button onclick="javascript:updateMarker();">修改marker</button><button onclick="javascript:clearMap();">清空地图</button></li>
<li><button onclick="javascript:addMarker2();">普通标注</button><button onclick="javascript:marker2Cartoon();">动画</button><button onclick="javascript:iJuhe();">聚合marker</button><button onclick="javascript:clearMap();"
<li><button onclick="javascript:addCloudLayer();">添加云图</button><button onclick="javascript:clearMap();">清空地图</button></li>
<li><button onclick="javascript:startRun();">轨迹回放</button><button onclick="javascript:endRun();">停⽌</button><button onclick="javascript:clearMap();">清空地图</button></li>
<li><button onclick="javascript:addCircle();">圆形</button><button onclick="javascript:addPolygon();
">多边形</button><button onclick="javascript:clearMap();">清空地图</button></li>
<li><button onclick="javascript:openInfo();">默认信息窗⼝</button><button onclick="javascript:myWindow();">⾃定义信息窗⼝</button><button onclick="javascript:clearMap();">清空地图</button></li>
<li><button onclick="javascript:xmMap();">⿎浪屿地图</button><button onclick="javascript:clearMap();">清空地图</button></li>
</ul>
</div>
<!-- tongji begin-->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " " : " ");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "/h.js%3Faeff88f1904
5b513af7681b011cea3bd' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- tongji end -->
</body>
<script language="javascript">
var mapObj;
var marker;
var marker2;
var marker3;
var cluster;
开心的语句
var markers = [];
var lineArr;
var cloudDataLayer;
//初始化地图对象，加载地图
function mapInit(){
mapObj = new AMap.Map("iCenter",{
center:new AMap.LngLat(116.397428,39.90923), //地图中⼼点
level:11 //地图显⽰的⽐例尺级别
//zoomEnable:fal
});
AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
}
/
/⿏标点击，获取经纬度坐标
function getLnglat(e){
var x = Lng();
var y = Lat();
}
//清空地图
function clearMap(){
mapObj.clearMap();
cloudDataLayer.tMap(null);蓝色系列
}
/
/实例化marker
function addMarker(){
mapObj.clearMap();
marker=new AMap.Marker({
icon:"zhao.gif",
position:new AMap.LngLat(116.405467,39.907761)
});
marker.tMap(mapObj); //在地图上添加点
}
//修改marker
function updateMarker()
{
//⾃定义点标记内容
var markerContent = ateElement("div");
markerContent.className = "markerContentStyle";
//点标记中的图标
var markerImg= ateElement("img");
markerImg.className="markerlnglat";
markerImg.src="tuo.gif";
markerContent.appendChild(markerImg);
//点标记中的⽂本
var markerSpan = ateElement("span");
markerSpan.innerHTML = "⼀秒钟变拓跋⽟⼉";
markerContent.appendChild(markerSpan);
marker.tContent(markerContent);//更新点标记内容
marker.tPosition(new AMap.LngLat(116.368732,39.92514)); //更新点标记位置
}
function addMarker2(){
mapObj.clearMap();
marker2 = new AMap.Marker({
position:(new AMap.LngLat(116.384182,39.916451)),
draggable:true, //点标记可拖拽
cursor:'move',
raiOnDrag:true//⿏标拖拽点标记时开启点标记离开地图的效果
});
marker2.tMap(mapObj);
}
function marker2Cartoon(){
marker2.tAnimation('AMAP_ANIMATION_BOUNCE'); //设置点标记的动画效果，此处为弹跳效果
}
function iJuhe(){
mapObj.clearMap();
// 随机向地图添加500个标注点
var mapBounds = Bounds();
var sw = SouthWest();
var ne = NorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 500; i ++) {
var markerPosition = new AMap.LngLat(sw.lng + lngSpan * (Math.random() * 1),ne.lat - latSpan * (Math.random() * 1));
var marker = new AMap.Marker({
map:mapObj,
position:markerPosition, //基点位置
icon:"js_marker.png", //marker图标，直接传递地址url
offt:{x:-8,y:-34} //相对于基点的位置
});
markers.push(marker);
}
tTimeout(function(){
addCluster(0); e
},500);
}
function addCluster(tag)
{
if(cluster) {
