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

立即下载用AI写一个

发布时间：2020-10-20

2人 | 浏览：1814次 | 收藏 |

技术：HTM L+JS+DrawingManager_min.js

运行环境：浏览器

概述

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

详细

### 概述：
百度地图框选标注坐标返回标注信息。

步骤：

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

演示效果如下：

![](/contentImages/image/20201014/5qRNV1RjII3g19USK70.gif)

### 文件结构：
![](/contentImages/image/20201014/ggqTSgufebk73Gcbkb0.png)

### **核心代码：**
HTML：

</div>
     
    <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部分：

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);

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>

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

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

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子