百度地图框选标注坐标返回标注信息

①、框选地图中设置好的标注
②、返回框选标注的信息，显示在弹窗中。
③、点击弹窗中的数据列表，地图对应的标注显示具体信息

源文件地址：
https://download.csdn.net/download/weixin_39921970/14801191

步骤：
1、申请百度地图秘钥；
2、修改index.html中js的地图key；
3、引入百度地图的画图js；
4、该demo核心为框选地图标注返回选中的标注信息，按业务扩充修改，代码备注详细。

效果如下：

核心代码：
HTML：

</div>
 <!--右上角控制按钮 GO-->
<div class="open" id="open"></div>
<div class="btnbox " id="o1">
    <div class="out">
        <span>0</span>
        <span>核查</span>
    </div>
</div>
<div class="btnbox " id="o2">
    <div class="out ">
        <span>0</span>
        <span>脱岗</span>
    </div>
</div>
<div class="btnbox " id="o3">
    <div class="out ">
        <span>0</span>
        <span>睡岗</span>
    </div>
</div>
<div class="btnbox have " id="o4">
    <div class="out ">
        <span>10</span>
        <span>警情</span>
    </div>
</div>
<!--结果弹窗 -->
<div class="cont" id="J-cont" style="display:  none">
    <span>搜索结果: <p onclick="exit()" drawingtype="hander">关闭</p></span>
    <div class="items">
        <div class="item tabc_0" onclick="changeTab('0')"><span>保安人员</span></div>
        <div class="item tabc_1" onclick="changeTab('1')"><span>视频</span></div>
        <div class="item tabc_2" onclick="changeTab('2')"><span>群防力量</span></div>
    </div>
    <div class="conin ltab_0" style="display: block;" id="J-items">
    <!--框选的标注列表显示区-->
    </div>
    <div class=" ltab_1" id="J-items"><!--按需显示--></div>
    <div class="ltab_2" id="J-items"><!--按需显示--></div>
</div>

CSS：

 body,
    html,
    #allmap {
        font-family: "微软雅黑";
        height: 100%;
        margin: 0;
        overflow: hidden;
        width: 100%;
    }
    .cont {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 288px;
        padding: 0 10px;
        background: #ffffff;
        overflow: hidden;
        line-height: 40px;
        box-shadow: 0px 2px 5px #D9D9D9, 1px 2px 5px #333333;
    }
    .cont span {
        width: 100%;
        display: block;
        position: relative;
        border-bottom: 1px solid #d6d7dc;
        font-size: 14px;
    }
    .cont span p {
        width: 40px;
        height: 30px;
        display: block;
        margin: 0px;
        position: absolute;
        top: 0px;
        right: 0px;
        cursor: pointer;
    }
    .ltab_0,
    .ltab_1,
    .ltab_2 {
        line-height: 30px;
        height: 200px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding-bottom: 20px;
    }
    .items {
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #d6d7dc;
    }
    .item {
        width: 86px;
        float: left;
        height: 30px;
        line-height: 30px;
        margin: 5px;
        text-align: center;
        color: #ffffff;
        float: left;
    }
    .item span {
        width: 86px;
        float: left;
        height: 30px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        background: #3c7cd5;
        color: #ffffff;
        font-size: 12px;
    }
    .item p {
        width: 50px;
        float: right;
        margin: 3px 0;
        height: 25px;
        border-radius: 5px;
        font-size: 13px;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
        color: #3c7cd5;
        border: 1px solid #d6d7dc;
    }
    .ltab_0 {
        display: none;
    }
    .ltab_1 {
        display: none;
    }
    .ltab_2 {
        display: none;
    }
    .hide {
        display: none !important
    }
    .show {
        display: block !important;
    }
    /*右侧按钮组*/
    .btnbox {
        width: 60px;
        height: 60px;
        background: url(btn-item.png) 0 0 no-repeat;
        position: absolute;
        top: 75px;
        right: 10px;
        z-index: 999;
        overflow: hidden;
        margin-bottom: 17px;
        cursor: pointer;
        transition: all .3s ease-in-out .1s;
        -webkit-transition: all .3s ease-in-out .1s;
        -moz-transition: all .3s ease-in-out .1s;
        -o-transition: all .3s ease-in-out .1s;
    }
    .btnbox .out {
        width: 60px;
        height: 60px;
    }
    .btnbox span {
        width: 60px;
        display: inline-block;
        height: 17px;
        line-height: 17px;
        font-size: 14px;
        margin: 0px;
        text-align: center;
        color: #ffffff;
    }
    .btnbox span:first-child {
        margin-top: 10px;
    }
    .btnbox:hover .out {
        background: url(btn-item-hover.gif) 0 0 no-repeat;
    }
    .btnbox.have {
        background: url(btn-item-hover.png) 0 0 no-repeat;
    }
    .open {
        width: 59px;
        height: 59px;
        position: absolute;
        top: 75px;
        right: 10px;
        z-index: 9999;
        cursor: pointer;
        background: url(btn-open.png) 0 0 no-repeat;
    }
    .o1 {
        top: 135px;
        right: 10px;
    }
    .o2 {
        top: 195px;
        right: 10px;
    }
    .o3 {
        top: 255px;
        right: 10px;
    }
    .o4 {
        top: 315px;
        right: 10px;
    }
    .BMapLib_Drawing {
        transition: all .5s ease-in-out .1s;
        -webkit-transition: all .5s ease-in-out .1s;
        -moz-transition: all .5s ease-in-out .1s;
        -o-transition: all .5s ease-in-out .1s;
    }

JS部分：

<script type="text/javascript">
    function changeTab(ltab_num) {
        for (i = 0; i < 3; i++) {
            document.querySelector(".ltab_" + i).className = "conin ltab_" + i + " hide"; //将所有的层都隐藏  
        }
        document.querySelector(".ltab_" + ltab_num).className = "conin ltab_" + ltab_num + " show"; //显示当前层
    }
    // 百度地图API功能
    var map = new BMap.Map("map");
    var point = new BMap.Point(113.323685, 23.130522);
    map.centerAndZoom(point, 15);
    //map.centerAndZoom(point, 8);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    // 编写自定义函数,创建标注
    function addMarker(point, id, address, SecurityName) {
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        addClickHandler("<p>编号：" + id + "</p>" + "<p>地址：" + address + "</p>" + "<p>名字：" + SecurityName + "</p>", marker);
    }
    var opts = {
        width: 100, // 信息窗口宽度
        height: 140, // 信息窗口高度
        title: "信息窗口", // 信息窗口标题
        enableMessage: false //设置允许信息窗发送短息
    };
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(content, e);
        }
        );
    }
    function openInfo(content, e) {
        //console.log(content);
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }
    // 随机向地图添加25个标注
    var bounds = map.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var lngSpan = Math.abs(sw.lng - ne.lng);
    var latSpan = Math.abs(ne.lat - sw.lat);
    var allPointArray = [];
    var markers = [];
    //点击标注显示的数据
    var securityName = [["王思"], ["赵思"], ["钱思"], ["孙思"], ["周思"], ["吴思"], ["郑思"], ["冯思"], ["陈思"], ["楚思"]];
    var address = [["福州晋安区"], ["福州晋安区1"], ["福州晋安区2"], ["福州晋安区3"], ["福州晋安区4"], ["福州晋安区5"], ["福州晋安区6"], ["福州晋安区7"], ["福州晋安区8"], ["福州晋安区9"]];
    for (var i = 0; i < 10; i++) {
        var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
        // alert(securityName[i]);
        allPointArray.push({ Point: point, Id: i, Address: address[i], SecurityName: securityName[i] });
        addMarker(point, i, address[i], securityName[i]);//添加标注数据
    }
    //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
    //var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });
    var overlays = [];
    var overlaycomplete = function (e) {
        clearAll();
        overlays.push(e.overlay);
        e.overlay.enableEditing();
        e.overlay.addEventListener("lineupdate", function (e) {
            showLatLon(e.currentTarget);
        });
        var pointArray = e.overlay.getPath();
        // map.setViewport(pointArray); //调整视野
        getOverlayPath();
        document.getElementById("J-cont").style.display = 'block';
    };
    var styleOptions = {
        strokeColor: "blue", //边线颜色。
        fillColor: "blue", //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 2, //边线的宽度，以像素为单位。
        strokeOpacity: 0.5, //边线透明度，取值范围0 - 1。
        fillOpacity: 0.3, //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    };
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    function clearAll() {
        for (var i = 0; i < overlays.length; i++) {
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0;
    }
    function exit() {
        document.getElementById("J-cont").style.display = 'none';
        clearAll();
    }
    function getOverlayPath() {
        var box = overlays[overlays.length - 1];
        var pointArray = box.getPath();
        // map.setViewport(pointArray); //调整视野
        var bound = map.getBounds(); //地图可视区域
        var s = "";
        for (var i = 0; i < allPointArray.length; i++) {
            if (bound.containsPoint(allPointArray[i].Point) == true) {
                if (isInsidePolygon(allPointArray[i].Point, pointArray))
                    s += "<div onclick='clickitem(" + allPointArray[i].Id + ")'> <input type='checkbox'>" + allPointArray[i].SecurityName + "</div>"
            }
        }
        // alert(s);
        document.getElementById("J-items").innerHTML = s + "<br />";
    }
    // 编写自定义函数,创建标注
    function clickitem(id) {
        var oFF = document.getElementById('map');
        var oLink = oFF.getElementsByTagName('span');//找到第二个a
        var list = [];
        var n = 0;
        for (var i = 0; i < oLink.length; i++) {
            if (oLink[i].className == 'BMap_Marker BMap_noprint') {
                list.push(oLink[i])
            }
        }
        console.log(list[id]);
        list[id].click();
    }
    var overlaysCache = [];
    function showLatLon(a) {
        var len = a.length;
        var arr = [];
        for (var i = 0; i < len - 1; i++) {
            arr.push([a[i].lng, a[i].lat]);
        }
        this.overlaysCache = arr;
    }
    //判断一个标注点是否在多边形里
    //pt标注点，poly多边形数组
    function isInsidePolygon(pt, poly) {
        for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
            ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
                (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
                (c = !c);
        return c;
    }
</script>