• 覆盖物


    • 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="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="8px;height:30px;background:url('+bg+') -8px 0px;
    position:absolute;right:0;top:0;overflow:hidden;"></div>');
    m.push('<div style="position:absolute;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="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="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="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;"+(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));
  • 相关阅读:
    Python3基础 dict get 在查询不存在的键时,返回指定的内容
    MySql和Sql的单行注释和多行注释的区别
    MySql Server 5.7的下载及安装详细步骤
    sql Server中临时表与数据表的区别
    Sql Server中集合的操作(并集、差集、交集)学习
    sql server2008 如何获取上月、上周、昨天、今天、本周、本月的查询周期(通过存储过程)
    sql server中的大数据的批量操作(批量插入,批量删除)
    sql Server如何执行批量插入和批量删除
    vs2015 企业版、专业版如何破解(秘钥)
    Dos命令下目录操作
  • 原文地址:https://www.cnblogs.com/subtract/p/5093795.html
Copyright © 2020-2023  润新知