【高德地图API】从零开始学高德JS API（三）覆盖物

2025-02-03 技术教程

摘要：覆盖物，是一张地图的灵魂。有覆盖物的地图，才是完整的地图。在一张地图上，除了底层的底图（瓦片图，矢量图），控件（有功能可操作的工具），最重要最不可缺少的就是覆盖物了。覆盖物有多种，包括，标注、折线、多边形、信息窗口、聚合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是标注的位置，经纬度。

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

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

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

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

marker.setContent(markerContent);//更新点标记内容marker.setPosition(newAMap.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哟，也蛮漂亮的。

functionaddMarker2(){marker2=newAMap.Marker({position:(newAMap.LngLat(116.384182,39.916451)),draggable:true,//点标记可拖拽cursor:'move'//鼠标悬停点标记时的鼠标样式});marker2.setMap(mapObj);}

2、给marker加上动画

跳动动画

functionmarker2Cartoon(){marker2.setAnimation('AMAP_ANIMATION_BOUNCE');//设置点标记的动画效果，此处为弹跳效果}

拖拽动画

拖拽动画需要在marker里面设置。

functionaddMarker2(){marker2=newAMap.Marker({position:(newAMap.LngLat(116.384182,39.916451)),draggable:true,//点标记可拖拽cursor:'move',raiseOnDrag:true//鼠标拖拽点标记时开启点标记离开地图的效果});marker2.setMap(mapObj);}

3、聚合marker

增加一群marker，就是聚合marker

温馨小贴士：为什么要使用聚合marker？

当marker大于500的时候，满屏幕都是密密麻麻的marker了，显得杂乱无章。

而且由于浏览器性能的关系，特别是IE6浏览器，会造成浏览器卡死的情况。

这个时候，使用麻点图或者聚合marker就可以轻松解决marker数量太多的问题。

增加一群marker：

functioniJuhe(){mapObj.clearMap();//随机向地图添加500个标注点varmapBounds=mapObj.getBounds();varsw=mapBounds.getSouthWest();varne=mapBounds.getNorthEast();varlngSpan=Math.abs(sw.lng-ne.lng);varlatSpan=Math.abs(ne.lat-sw.lat);for(vari=0;i<500;i++){varmarkerPosition=newAMap.LngLat(sw.lng+lngSpan*(Math.random()*1),ne.lat-latSpan*(Math.random()*1));varmarker=newAMap.Marker({map:mapObj,position:markerPosition,//基点位置icon:"js_marker.png",//marker图标，直接传递地址urloffset:{x:-8,y:-34}//相对于基点的位置});markers.push(marker);}}

增加marker聚合的功能：

functionaddCluster(tag){if(cluster){cluster.setMap(null);}if(tag==1){varsts=[{url:"js_1.png",size:newAMap.Size(32,32),offset:newAMap.Pixel(-16,-30)},{url:"js_2.png",size:newAMap.Size(32,32),offset:newAMap.Pixel(-16,-30)},{url:"js_3.png",size:newAMap.Size(48,48),offset:newAMap.Pixel(-24,-45),textColor:'#CC0066'}];mapObj.plugin(["AMap.MarkerClusterer"],function(){cluster=newAMap.MarkerClusterer(mapObj,markers,{styles:sts});});}else{mapObj.plugin(["AMap.MarkerClusterer"],function(){cluster=newAMap.MarkerClusterer(mapObj,markers);});}}

缩小地图，marker会变得更加集中。

增加一个延时延时的功能，先添加500的marker，一秒钟后变成聚合marker。

setTimeout(function(){addCluster(0);e},1000);

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

三、麻点图

高德云图是实时渲染的，在后台更改数据后，能在前台直观的看到数据展示。

免去了切图啊，制作瓦片图，对准经纬度等一系列的麻烦。

1、登录云图，轻松制作麻点图：http://yuntu.amap.com/datamanager/index.html

点击创建地图

2、导入数据

手工导入数据，可视化一站式操作，适合少量点：

自动导入数据，适合大批量数据：

温馨小贴士：

第一行必须是字段名，只能是字母、数字和下划线，并且不能以数字开头。

经纬度必须分开成2个字段！

文件只支持 .csv 格式、UTF-8编码，数据量不超过 10,000 条，文件大小不超过10M、字段总数不超过 40 个。

字段命名规则：以英文字母开头，仅由英文字母、数字、下划线组成，字段名长度不超过20位。

创建表格数据，可以打开一个记事本，编码改为UFT-8模式。然后导入数据。

数据格式举例：

tag,name,lng,lat,tel,content免费停车场,免费停车场001,116.430359,39.958175,010-52294832,停过5次没贴条免费停车场,免费停车场002,116.279297,40.00132,010-52294832,停过1次没贴条免费停车场,免费停车场003,116.202393,39.825413,010-52294832,停过2次没贴条免费停车场,免费停车场004,116.564941,39.835959,010-52294832,停过7次没贴条免费停车场,免费停车场005,116.437225,39.806426,010-52294832,停过20次没贴条

数据导入后，就是这样子的。大家点击预览，就可以获取一个url了。

然后大家可以直接用iframe的形式，把标注好的地图放到自己的网站上。

云图实时渲染：

<iframesrc="http://yuntu.amap.com/share/MZVB3y"></iframe>

接下来，大家如果要使用云索引，云检索，使用这个教程：

三甲医院例子：http://www.cnblogs.com/milkmap/p/3637899.html

东莞酒店例子：http://www.cnblogs.com/milkmap/p/3657829.html

贪官罗马图：http://www.cnblogs.com/milkmap/p/3678377.html

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

四、折线，行车记录仪，轨迹回放

1、折线

functionaddLine(){varlineArr=newArray();//创建线覆盖物节点坐标数组lineArr.push(newAMap.LngLat("116.368904","39.913423"));lineArr.push(newAMap.LngLat("116.382122","39.901176"));lineArr.push(newAMap.LngLat("116.387271","39.912501"));lineArr.push(newAMap.LngLat("116.398258","39.904600"));polyline=newAMap.Polyline({path:lineArr,//设置线覆盖物路径strokeColor:"#3366FF",//线颜色strokeOpacity:1,//线透明度strokeWeight:5,//线宽strokeStyle:"solid",//线样式strokeDasharray:[10,5]//补充线样式});polyline.setMap(mapObj);}

2、让轨迹动起来

marker3.moveAlong(lineArr,80);//开始轨迹回放

3、让轨迹暂停

marker3.stopMove();//暂停轨迹回放

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

五、圆形，多边形

圆形

//添加圆覆盖物functionaddCircle(){circle=newAMap.Circle({center:newAMap.LngLat("116.403322","39.920255"),//圆心位置radius:10000,//半径strokeColor:"#F33",//线颜色strokeOpacity:1,//线透明度strokeWeight:3,//线粗细度fillColor:"#ee2200",//填充颜色fillOpacity:0.35//填充透明度});circle.setMap(mapObj);}

多边形

//添加多边形覆盖物functionaddPolygon(){varpolygonArr=newArray();//多边形覆盖物节点坐标数组polygonArr.push(newAMap.LngLat("116.319809","39.956596"));polygonArr.push(newAMap.LngLat("116.556702","39.983434"));polygonArr.push(newAMap.LngLat("116.483917","39.845449"));polygonArr.push(newAMap.LngLat("116.244278","39.848612"));polygon=newAMap.Polygon({path:polygonArr,//设置多边形边界路径strokeColor:"#0000ff",//线颜色strokeOpacity:0.2,//线透明度strokeWeight:3,//线宽fillColor:"#f5deb3",//填充色fillOpacity:0.35//填充透明度});polygon.setMap(mapObj);}

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

六、信息窗口

1、默认信息窗口

//在指定位置打开默认信息窗体functionopenInfo(){//构建信息窗体中显示的内容varinfo=[];info.push("<div><div><imgstyle=\"float:left;\"src=\"http://webapi.amap.com/p_w_picpaths/autonavi.png\"/></div>");info.push("<divstyle=\"padding:0px0px0px4px;\"><b>高德软件</b>");info.push("电话:010-84107000邮编:100102");info.push("地址:北京市望京阜通东大街方恒国际中心A座16层</div></div>");inforWindow=newAMap.InfoWindow({content:info.join("<br/>")//使用默认信息窗体框样式，显示信息内容});inforWindow.open(mapObj,newAMap.LngLat(116.373881,39.907409));}

2、自定义信息窗口

//实例化信息窗体varinfoWindow2=newAMap.InfoWindow({isCustom:true,//使用自定义窗体content:createInfoWindow('方恒假日酒店  <span>价格:318</span>',"<imgsrc='http://tpc.googlesyndication.com/simgad/5843493769827749134'style='float:left;margin:05px5px0;'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里<br/>电话：01064733333<br/><ahref='http://baike.baidu.com/view/6748574.htm'>详细信息</a>"),size:newAMap.Size(300,0),offset:newAMap.Pixel(0,-50)//-113,-140});//关闭信息窗体functioncloseInfoWindow(){mapObj.clearInfoWindow();}//构建自定义信息窗体functioncreateInfoWindow(title,content){varinfo=document.createElement("div");info.className="info";//定义顶部标题vartop=document.createElement("div");top.className="info-top";vartitleD=document.createElement("div");titleD.innerHTML=title;varcloseX=document.createElement("img");closeX.src="close2.gif";closeX.onclick=closeInfoWindow;top.appendChild(titleD);top.appendChild(closeX);info.appendChild(top);//定义中部内容varmiddle=document.createElement("div");middle.className="info-middle";middle.innerHTML=content;info.appendChild(middle);//定义底部内容varbottom=document.createElement("div");bottom.className="info-bottom";varsharp=document.createElement("img");sharp.src="sharp.png";bottom.appendChild(sharp);info.appendChild(bottom);returninfo;}functionmyWindow(){infoWindow2.open(mapObj,newAMap.LngLat(116.373881,39.907409));}

自定义信息窗口，需要CSS样式支持

/*定义自定义信息窗体样式*/div.info{position:relative;z-index:100;border:1pxsolid#BCBCBC;box-shadow:0010px;#B7B6B6;border-radius:8px;background-color:rgba(255,255,255,0.9);transition-duration:0.25s;}div.info:hover{box-shadow:0px0px15px#0CF;}div.info-top{position:relative;background:nonerepeatscroll00#F9F9F9;border-bottom:1pxsolid#CCC;border-radius:5px5px00;}div.info-topdiv{display:inline-block;color:#333333;font-size:14px;font-weight:bold;line-height:31px;padding:010px;}div.info-topimg{position:absolute;top:10px;right:10px;transition-duration:0.25s;}div.info-topimg:hover{box-shadow:0px0px5px#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-bottomimg{position:relative;z-index:104;}

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

七、厦门鼓浪屿地图

大家可以使用图片覆盖物，实现各种园区图，厂区图，校园图，手绘风格地图等。

在网上找好手绘地图，我找到的是鼓浪屿手绘地图。把它扣空，做成png-24的透明图片。

然后确定图片的左下角和右上角。把图片贴上去。效果不错。

functionxmMap(){mapObj.setZoom(15);varbounds=newAMap.Bounds(newAMap.LngLat(118.055005,24.435624),newAMap.LngLat(118.078351,24.454299)),groundImageOpts={opacity:1,//图片透明度clickable:true,//图片相应鼠标点击事件，默认：falsemap:mapObj//图片叠加的地图对象};//实例化一个图片覆盖物对象vargroundImage=newAMap.GroundImage('gly.png',bounds,groundImageOpts);mapObj.setCenter(newAMap.LngLat(118.067665,24.443946));}

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

八、源代码与示例

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

<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>地图覆盖物</title><linkrel="stylesheet"type="text/css"href="zero.css"/><scriptlanguage="javascript"src="http://webapi.amap.com/maps?v=1.2&key=23e8cfe2d8f3ce1e4a4197902d28f445"></script></head><bodyonLoad="mapInit()"><divid="iCenter"></div><divid="iControlbox"><p>坐标：<spanid="lnglat"> </span></p><ul><li><buttononclick="javascript:addMarker();">添加marker</button><buttononclick="javascript:updateMarker();">修改marker</button><buttononclick="javascript:clearMap();">清空地图</button></li><li><buttononclick="javascript:addMarker2();">普通标注</button><buttononclick="javascript:marker2Cartoon();">动画</button><buttononclick="javascript:iJuhe();">聚合marker</button><buttononclick="javascript:clearMap();">清空地图</button></li><li><buttononclick="javascript:addCloudLayer();">添加云图</button><buttononclick="javascript:clearMap();">清空地图</button></li><li><buttononclick="javascript:startRun();">轨迹回放</button><buttononclick="javascript:endRun();">停止</button><buttononclick="javascript:clearMap();">清空地图</button></li><li><buttononclick="javascript:addCircle();">圆形</button><buttononclick="javascript:addPolygon();">多边形</button><buttononclick="javascript:clearMap();">清空地图</button></li><li><buttononclick="javascript:openInfo();">默认信息窗口</button><buttononclick="javascript:myWindow();">自定义信息窗口</button><buttononclick="javascript:clearMap();">清空地图</button></li><li><buttononclick="javascript:xmMap();">鼓浪屿地图</button><buttononclick="javascript:clearMap();">清空地图</button></li></ul></div><scripttype="text/javascript">var_bdhmProtocol=(("https:"==document.location.protocol)?"https://":"http://");document.write(unescape("%3Cscriptsrc='"+_bdhmProtocol+"hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd'type='text/javascript'%3E%3C/script%3E"));</script></body><scriptlanguage="javascript">varmapObj;varmarker;varmarker2;varmarker3;varcluster;varmarkers=[];varlineArr;varcloudDataLayer;//初始化地图对象，加载地图functionmapInit(){mapObj=newAMap.Map("iCenter",{center:newAMap.LngLat(116.397428,39.90923),//地图中心点level:11//地图显示的比例尺级别//zoomEnable:false});AMap.event.addListener(mapObj,'click',getLnglat);//点击事件}//鼠标点击，获取经纬度坐标functiongetLnglat(e){varx=e.lnglat.getLng();vary=e.lnglat.getLat();document.getElementById("lnglat").innerHTML=x+","+y;}//清空地图functionclearMap(){mapObj.clearMap();cloudDataLayer.setMap(null);}//实例化markerfunctionaddMarker(){mapObj.clearMap();marker=newAMap.Marker({icon:"zhao.gif",position:newAMap.LngLat(116.405467,39.907761)});marker.setMap(mapObj);//在地图上添加点}//修改markerfunctionupdateMarker(){//自定义点标记内容varmarkerContent=document.createElement("div");markerContent.className="markerContentStyle";//点标记中的图标varmarkerImg=document.createElement("img");markerImg.className="markerlnglat";markerImg.src="tuo.gif";markerContent.appendChild(markerImg);//点标记中的文本varmarkerSpan=document.createElement("span");markerSpan.innerHTML="一秒钟变拓跋玉儿";markerContent.appendChild(markerSpan);marker.setContent(markerContent);//更新点标记内容marker.setPosition(newAMap.LngLat(116.368732,39.92514));//更新点标记位置}functionaddMarker2(){mapObj.clearMap();marker2=newAMap.Marker({position:(newAMap.LngLat(116.384182,39.916451)),draggable:true,//点标记可拖拽cursor:'move',raiseOnDrag:true//鼠标拖拽点标记时开启点标记离开地图的效果});marker2.setMap(mapObj);}functionmarker2Cartoon(){marker2.setAnimation('AMAP_ANIMATION_BOUNCE');//设置点标记的动画效果，此处为弹跳效果}functioniJuhe(){mapObj.clearMap();//随机向地图添加500个标注点varmapBounds=mapObj.getBounds();varsw=mapBounds.getSouthWest();varne=mapBounds.getNorthEast();varlngSpan=Math.abs(sw.lng-ne.lng);varlatSpan=Math.abs(ne.lat-sw.lat);for(vari=0;i<500;i++){varmarkerPosition=newAMap.LngLat(sw.lng+lngSpan*(Math.random()*1),ne.lat-latSpan*(Math.random()*1));varmarker=newAMap.Marker({map:mapObj,position:markerPosition,//基点位置icon:"js_marker.png",//marker图标，直接传递地址urloffset:{x:-8,y:-34}//相对于基点的位置});markers.push(marker);}setTimeout(function(){addCluster(0);e},500);}functionaddCluster(tag){if(cluster){cluster.setMap(null);}if(tag==1){varsts=[{url:"js_1.png",size:newAMap.Size(32,32),offset:newAMap.Pixel(-16,-30)},{url:"js_2.png",size:newAMap.Size(32,32),offset:newAMap.Pixel(-16,-30)},{url:"js_3.png",size:newAMap.Size(48,48),offset:newAMap.Pixel(-24,-45),textColor:'#CC0066'}];mapObj.plugin(["AMap.MarkerClusterer"],function(){cluster=newAMap.MarkerClusterer(mapObj,markers,{styles:sts});});}else{mapObj.plugin(["AMap.MarkerClusterer"],function(){cluster=newAMap.MarkerClusterer(mapObj,markers);});}}//添加云图functionaddCloudLayer(){//加载云图层插件mapObj.plugin('AMap.CloudDataLayer',function(){varlayerOptions={query:{keywords:''},clickable:true};cloudDataLayer=newAMap.CloudDataLayer('533904fbe4b08ebff7d53895',layerOptions);//实例化云图层类cloudDataLayer.setMap(mapObj);//叠加云图层到地图AMap.event.addListener(cloudDataLayer,'click',function(result){varclouddata=result.data;varinfoWindow=newAMap.InfoWindow({content:"<h4><fontface=\"微软雅黑\"color=\"#3366FF\">"+clouddata._name+"</font></h4><hr/>地址："+clouddata._address+"<br/>"+"电话号码："+clouddata.phonenumber+"<br/>"+"邮编："+clouddata.postalcode+"<br/><strong>"+"擅长专科："+clouddata.medicalspecialists+"</strong><br/>"+"所在省份："+clouddata.provinces,size:newAMap.Size(300,0),autoMove:true,offset:newAMap.Pixel(0,-5)});infoWindow.open(mapObj,clouddata._location);});});}functionremoveCloudLayer(){cloudDataLayer.setMap(null);}//地图图块加载完毕后执行函数functioncompleteEventHandler(){marker3=newAMap.Marker({map:mapObj,//draggable:true,//是否可拖动position:newAMap.LngLat(116.273881,39.807409),//基点位置icon:"http://code.mapabc.com/p_w_picpaths/car_03.png",//marker图标，直接传递地址urloffset:newAMap.Pixel(-26,-13),//相对于基点的位置autoRotation:true});varlngX=116.273881;varlatY=39.807409;lineArr=newArray();lineArr.push(newAMap.LngLat(lngX,latY));for(vari=1;i<30;i++){lngX=lngX+Math.random()*0.05;if(i%2){latY=latY+Math.random()*0.0001;}else{latY=latY+Math.random()*0.06;}lineArr.push(newAMap.LngLat(lngX,latY));}//绘制轨迹varpolyline=newAMap.Polyline({map:mapObj,path:lineArr,strokeColor:"#00A",//线颜色strokeOpacity:1,//线透明度strokeWeight:3,//线宽strokeStyle:"solid",//线样式});}functionstartRun(){//开始播放动画completeEventHandler();marker3.moveAlong(lineArr,80);//开始轨迹回放}functionendRun(){//结束动画播放marker3.stopMove();//暂停轨迹回放}//添加圆覆盖物functionaddCircle(){circle=newAMap.Circle({center:newAMap.LngLat("116.403322","39.920255"),//圆心位置radius:10000,//半径strokeColor:"#F33",//线颜色strokeOpacity:1,//线透明度strokeWeight:3,//线粗细度fillColor:"#ee2200",//填充颜色fillOpacity:0.35//填充透明度});circle.setMap(mapObj);}//添加多边形覆盖物functionaddPolygon(){varpolygonArr=newArray();//多边形覆盖物节点坐标数组polygonArr.push(newAMap.LngLat("116.319809","39.956596"));polygonArr.push(newAMap.LngLat("116.556702","39.983434"));polygonArr.push(newAMap.LngLat("116.483917","39.845449"));polygonArr.push(newAMap.LngLat("116.244278","39.848612"));polygon=newAMap.Polygon({path:polygonArr,//设置多边形边界路径strokeColor:"#0000ff",//线颜色strokeOpacity:0.2,//线透明度strokeWeight:3,//线宽fillColor:"#f5deb3",//填充色fillOpacity:0.35//填充透明度});polygon.setMap(mapObj);}//在指定位置打开默认信息窗体functionopenInfo(){//构建信息窗体中显示的内容varinfo=[];info.push("<div><div><imgstyle=\"float:left;\"src=\"http://webapi.amap.com/p_w_picpaths/autonavi.png\"/></div>");info.push("<divstyle=\"padding:0px0px0px4px;\"><b>高德软件</b>");info.push("电话:010-84107000邮编:100102");info.push("地址:北京市望京阜通东大街方恒国际中心A座16层</div></div>");inforWindow=newAMap.InfoWindow({content:info.join("<br/>")//使用默认信息窗体框样式，显示信息内容});inforWindow.open(mapObj,newAMap.LngLat(116.373881,39.907409));}//实例化信息窗体varinfoWindow2=newAMap.InfoWindow({isCustom:true,//使用自定义窗体content:createInfoWindow('方恒假日酒店  <span>价格:318</span>',"<imgsrc='http://tpc.googlesyndication.com/simgad/5843493769827749134'style='float:left;margin:05px5px0;'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里<br/>电话：01064733333<br/><ahref='http://baike.baidu.com/view/6748574.htm'>详细信息</a>"),size:newAMap.Size(300,0),offset:newAMap.Pixel(0,-50)//-113,-140});//关闭信息窗体functioncloseInfoWindow(){mapObj.clearInfoWindow();}//构建自定义信息窗体functioncreateInfoWindow(title,content){varinfo=document.createElement("div");info.className="info";//定义顶部标题vartop=document.createElement("div");top.className="info-top";vartitleD=document.createElement("div");titleD.innerHTML=title;varcloseX=document.createElement("img");closeX.src="close2.gif";closeX.onclick=closeInfoWindow;top.appendChild(titleD);top.appendChild(closeX);info.appendChild(top);//定义中部内容varmiddle=document.createElement("div");middle.className="info-middle";middle.innerHTML=content;info.appendChild(middle);//定义底部内容varbottom=document.createElement("div");bottom.className="info-bottom";varsharp=document.createElement("img");sharp.src="sharp.png";bottom.appendChild(sharp);info.appendChild(bottom);returninfo;}functionmyWindow(){infoWindow2.open(mapObj,newAMap.LngLat(116.373881,39.907409));}functionxmMap(){mapObj.setZoom(15);varbounds=newAMap.Bounds(newAMap.LngLat(118.055005,24.435624),newAMap.LngLat(118.078351,24.454299)),groundImageOpts={opacity:1,//图片透明度clickable:true,//图片相应鼠标点击事件，默认：falsemap:mapObj//图片叠加的地图对象};//实例化一个图片覆盖物对象vargroundImage=newAMap.GroundImage('gly.png',bounds,groundImageOpts);setTimeout(function(){mapObj.setCenter(newAMap.LngLat(118.067665,24.443946));},500);//mapObj.setCenter(newAMap.LngLat(118.067665,24.443946));}</script></html>

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。