码迷,mamicode.com
首页 > 其他好文 > 详细

覆盖物

时间:2016-01-01 23:02:12      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:

  • Marker: 标注表示地图上的点,可自定义标注的图标。
  • Label: 表示地图上的文本标注,您可以自定义标注的文本内容。
  • Polyline: 表示地图上的折线。
  • Polygon: 表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其设置填充颜色。
  • Circle: 表示地图上的圆。
  • InfoWindow: 表示信息窗口,也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。需要注意的是,同一时刻只能有一个信息窗口在地图上打开。

Marker

点标注

var marker = new AMap.Marker({
id:"m",
position: new AMap.LngLat(116.40632629394531, 39.90394233735701),
offset: new AMap.Pixel(-8,-34),
icon: "http://webapi.amap.com/static/images/marker_sprite.png"
});// 自定义构造AMap.Marker对象
mapObj.addOverlays(marker); //加载覆盖物

复杂点标注

var marker = new AMap.Marker({
    id:"m24",//唯一ID
    position:new AMap.LngLat(116.37388157654,39.907409934248),//基点位置
    offset:new AMap.Pixel(-14,-34),//相对于基点的位置
    icon:new AMap.Icon({  //复杂图标
        size:new AMap.Size(27,36),//图标大小
        image:"http://webapi.amap.com/static/images/custom_a_j.png", //大图地址
        imageOffset:new AMap.Pixel(-28,0)//相对于大图的取图位置
    })
});
mapObj.addOverlays(marker);

自定义点标注

/* 定义自定义点样式 */
div.marker{height:40px;background:url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker.png)
left top no-repeat;}
div.marker div{height:28px;line-height:28px;margin:0 10px;color:#FFF;background:
url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker_bg_170x28.gif) right top no-repeat;
padding-right:10px;}

/* 修改背景URL */
div.change{background-image:url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h.png);}
div.change div{background-image:url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h-l.gif);}
…
…

//
自定义覆盖物dom元素 var m = document.createElement("div"); m.className = "marker"; var n = document.createElement("div"); n.innerHTML = "Amap"; m.appendChild(n); var marker = new AMap.Marker({ id:"m225", position:new AMap.LngLat(116.37388157654,39.907409934248),//基点位置 offset:new AMap.Pixel(0,-40),//相对于基点的偏移位置 //draggable:true, //是否可拖动 content:m //自定义覆盖物内容 }); mapObj.addOverlays(marker); //添加到地图 //mouseover,换个皮肤 mapObj.bind(marker,"mouseover",function(){ n.innerHTML = "高德软件";//修改内容 m.className = "marker change";//增加样式 }); //mouseout,换回皮肤 mapObj.bind(marker,"mouseout",function(){ n.innerHTML = "Amap";//修改内容 m.className = m.className.replace(" change",""); });

Label 文本标注

    var marker = new AMap.Marker({
        id:"m225",
        position:new AMap.LngLat(116.373881,39.907409), //基点位置
        offset:new AMap.Pixel(0,0), //相对于基点的偏移位置
        //draggable:true,  //是否可拖动
        content:m   //自定义覆盖物内容
    });
  mapObj.addOverlays(marker);     //添加到地图

InfoWindow 提示框

//构建点对象
    var marker = new AMap.Marker({
        id:"m23",//唯一ID
        position:new AMap.LngLat(116.37388157654,39.907409934248),  
        icon:"http://webapi.amap.com/static/images/marker_sprite.png", //marker图标,直接传递地址url
        offset:{x:-8,y:-34}  //相对于基点的位置
    });
    mapObj.addOverlays(marker);//将点添加到地图

    var info = [];
    info.push("  高德软件");
    info.push("  电话 : 010-84107000   邮编 : 100102");
    info.push("  地址 : 北京市望京阜通东大街方恒国际中心A座16层");
    
    var inforWindow = new AMap.InfoWindow({
        offset:new AMap.Pixel(45,-34),
        content:info.join("")
    });
   marker.on(mouseover,openInfo);
    marker.on(mouseout,closeInfo);
    function openInfo(e) {
        infoWindow.open(mapObj,e.lnglat);
    }
    function closeInfo(){
        infoWindow.close();
    }

自定义信息窗口

//定义InfoWindow()方法,包括信息窗口显示外观和信息窗口的内容
function InfoWindow(title,content){
var bg = "http://webapi.amap.com/static/images/info_01.png";
var m = [];
m.push(<div style="height:30px;position:relative;z-index:104;overflow:hidden;">);
m.push(<div style="width:8px;height:30px;background:url(+bg+) 0px 0px;
position:absolute;left:0;top:0;overflow:hidden;"></div>‘);
//信息窗体头部样式更改
m.push(<div style="position:relative;height:29px;border-top:#BBCCD3 solid 1px;
margin:0px 8px 1px 8px;background-color:#BBCCD3;overflow:hidden;font-size:14px;line-height:29px;
color:#333333">‘+title+‘</div>‘);
m.push(<div style="width:8px;height:30px;background:url(+bg+) -8px 0px;
position:absolute;right:0;top:0;overflow:hidden;"></div>‘);
m.push(<div style="position:absolute;width:7px;height:7px;background:url(+bg+) -25px -35px;right:8px;
top:11px;cursor:hand;cursor:pointer;" onclick="closeInfoWindow()"></div>‘);
m.push(</div>);
//信息窗体内部样式更改
m.push(<div style="width:300px;padding:0 2px;border-left:#BBCCD3 solid 1px;border-right:#BBCCD3 solid 1px; 
background-color:#F8F8F8;word-break:break-all;font-size:12px;overflow:hidden;">‘);
m.push(content);
m.push(</div>);
m.push(<div style="height:8px;position:relative;z-index:104;">);
m.push(<div style="width:8px;height:8px;background:url(+bg+) 0px -38px;
position:absolute;left:0;top:0;overflow:hidden;"></div>‘);
m.push(<div style="height:7px;border-bottom:#BBCCD3 solid 1px;margin:0px 8px;
background-color:#F8F8F8;overflow:hidden;"></div>‘);
m.push(<div style="width:8px;height:8px;background:url(+bg+) -8px -38px;
position:absolute;right:0;top:0;overflow:hidden;"></div>‘);
m.push(</div>);
m.push(<div style="height:0;position:relative;z-index:104;">);
for(var i=0;i<5;i++){
m.push("<div style=\"position:absolute;width:"+(26-i*5)+"px;height:5px;
background:url("+bg+") -"+(22-i)+"px "+(-i*5)+"px;left:"+(120-i)+"px;top:"+(-1+i*5)+"px;\"></div>");
    }
    m.push(</div>);
    return m.join("");
}

// 初始化一个信息窗口对象
var inforWindow = new AMap.InfoWindow({  
        isCustom:true,
        offset:new AMap.Pixel(38,-26),
        content:InfoWindow(高德软件,info.join("<br/>") )  //设置content内容为调用InfoWindow()方法的返回值
    }); 
….
// 打开信息窗口
inforWindow.open(this.mapObj,new AMap.LngLat(116.37388157654,39.907409934248));

 

覆盖物

标签:

原文地址:http://www.cnblogs.com/subtract/p/5093795.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!