百度地图创建标注标签maker与Label的实战教程

地图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;
}