【百度地图】用label和marker打开百度地图信息窗体

在百度地图中用label和marker打开infoBox在写法上的不同，主要体现在两者在添加点位位置时label的point是写在LabelOptions中，如：Label(content: String, opts: LabelOptions)；而marker是Marker(point: Point, opts: MarkerOptions)。现对用法上做下总结：
注意在项目中申请引用百度地图JavaScript API 秘钥和infoBox.js源码文件。
一、html

<script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&amp;ak=你的秘钥"></script>
    <script type="text/javascript"
            src="https://api.map.baidu.com/getscript?v=2.0&amp;ak=你的秘钥"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox.js"></script>

<div id="allmap"><!--地图容器--></div>

二、css

 body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:90%;}
    .infoBox{
        border:1px solid #00a65a;
        height: 180px;
    }
    .title{
        background: #00a65a;
        width: 100%;
        color: #fff;
        line-height: 45px;
        text-indent: 15px;
    }
    .content{
        padding: 5px;
    }
    .popup-triangle {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #00a65a;
        position: absolute;
        bottom: -10px;
        left: calc( 50% - 10px);
    }
    .BMapLib_bubble_content{
        background: white;
    }

三、JS

 // 百度地图API功能
    window.map = new BMap.Map("allmap");
    window.point = new BMap.Point(116.417854,39.921988);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom();//滚轮滚动

    //label加载infoBox
    labelInfoBox();
    function labelInfoBox() {
        var  myLabel = new BMap.Label("<div title='label标签'></div>",
            {
                position: point, //label 在此处添加点位位置信息
                offset:new BMap.Size(-12, 5)
            });
        myLabel.setStyle({
            width: "40px",  //宽
            height:  "45px", //高度
            border: "0",  //边
            background: "url(../one-ui/images/icon-map-air.png) no-repeat",    //背景图片
            backgroundSize:"70%",
            cursor: "pointer"
        });
        var info="<div class='infoBox'><div class='title'>用label加载infoBox</div>" +
            "<div class='content'>Label(content: String, opts: LabelOptions)</div><div class='popup-triangle'></div></div>";
        var infoBox = new BMapLib.InfoBox(map,info,{
            boxStyle:{
                width: "240px",
                height: "180px",
                marginBottom: "15px",
                backgroundColor:"white"
            },
            closeIconMargin: "18px 8px 4px 4px",
            closeIconUrl: "../one-ui/images/back.png",
            enableAutoPan: false,
            align: INFOBOX_AT_TOP
        });
        myLabel.setTitle("用label加载infoBox");
        map.addOverlay(myLabel);
        myLabel.addEventListener("click",function () {
            infoBox.open(point);
        });
    }
    
    //用marker打开信息窗体
    markerInfoBox();
    function markerInfoBox() {
        var newPoint=new BMap.Point(116.417854,39.936000);
        var marker = new BMap.Marker(newPoint, {  //marker 在此处添加点位位置信息
            "title": "marker标签"
        });
        var info="<div class='infoBox'><div class='title'>用marker加载infoBox</div>" +
            "<div class='content'>Marker(point: Point, opts: MarkerOptions)</div><div class='popup-triangle'></div></div>";
        var infoBox = new BMapLib.InfoBox(map, info, {
            boxStyle: {
                width: "240px",
                height: "180px",
                marginBottom: "40px",
                backgroundColor:"white"
            }
            , closeIconMargin: "18px 8px 4px 4px"
            , closeIconUrl: "../one-ui/images/back.png"
            , enableAutoPan: false
            , align: INFOBOX_AT_TOP
        });
        map.addOverlay(marker);              // 将标注添加到地图中
        marker.addEventListener("click",function () {
            infoBox.open(newPoint);
        });
    }

四、效果图：