频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
百度地图创建标注标签maker与Label的实战教程
2018-06-29 11:30:35         来源:前端  
收藏   我要投稿

地图API中存在弹出窗展示信息,下面介绍的为tip信息,效果如下:

这里写图片描述

1.创建百度地图

    //百度地图API功能
    var map = new BMap.Map("map_demo", {
        enableMapClick: false,
        vectorMapLevel: 99
    });

map_demo为p的id

2.添加标注与标签(红色标注)

/**
*longitude :经度
*latitude :纬度
*content :标签内容
*/
function drawPoint(map, longitude, latitude,content) {
    map.centerAndZoom(new BMap.Point(longitude, latitude), 12); // 初始化地图,设置中心点坐标和地图级别
    //map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 离线只支持电子地图,卫星/三维不支持
    //map.setCurrentCity(“北京”); // 设置地图显示的城市 离线地图不支持!!
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    map.addControl(new BMap.NavigationControl()); //缩放按钮
    map.clearOverlays();
    var new_point = new BMap.Point(longitude, latitude);
    var marker = new BMap.Marker(new_point); // 创建标注
    if(""!=content){
        marker.setLabel(setLabelStyle(content));
    }
    map.addOverlay(marker); // 将标注添加到地图中
    map.panTo(new_point);
}

function setLabelStyle(content) {
    //左偏移  右偏移
    var offsetSize = new BMap.Size(0, 0);
    var labelStyle = {
        color: "#fff",
        backgroundColor: "#333333",
        border: "0",
        fontSize : "14px",
        width:"200px",
        opacity:"0.8",
        verticalAlign:"center",
        borderRadius: "2px",
        whiteSpace:"normal",
        wordWrap:"break-word",
        padding:"7px",
    };
    //用于设置样式
    var spanA=""
    //不同数字长度需要设置不同的样式。
    var num=parseInt(content.length/10)
    switch(num) {
        case 0:
            offsetSize = new BMap.Size(-20, -40);
            break;
        case 1:
            offsetSize = new BMap.Size(-20, -40);
            break;
        case 2:
            offsetSize = new BMap.Size(-20, -60);
            break;
        case 3:
            offsetSize = new BMap.Size(-20, -80);
            break;
        default:
            break;
    }

    var label = new BMap.Label(content+spanA, {
        offset: offsetSize
    });
    label.setStyle(labelStyle);
    return label;
}

样式设置:

.angle{
    display: inline-block;
    width: 0px;
    height: 0px;
    position: absolute;
    bottom:-60px;
    border: 14px solid;
    left: 15px;
    bottom: -25px;
    opacity: 0.8;
    border-color: #333333 transparent transparent transparent;
}
点击复制链接 与好友分享!回本站首页
上一篇:介绍一下$(document).ready和window.onload的区别
下一篇:BOM scroll系列使用讲解
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站