①、框选地图中设置好的标注
②、返回框选标注的信息，显示在弹窗中。
③、点击弹窗中的数据列表，地图对应的标注显示具体信息
源文件地址：
/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');//找到第二个avar 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>
