百度api实现框选，显示框选区域内的数据，并且点击数据点显示详细信息

最新推荐文章于 2024-05-22 14:17:37 发布

AHUT_Tang

最新推荐文章于 2024-05-22 14:17:37 发布

阅读量5.6k

点赞数 1

文章标签：百度地图 api

本文链接：https://blog.csdn.net/tengqingyong/article/details/76651045

版权

下面我贴上所有源码，分享给大家，后台数据随便大家如何获取

1.打开地图，右上角是绘制多边形的工具条。引用DrawingManager_min.js和DrawingManager_min.css即可

2.选择框选类型。框选区域，判断点是否在多边形中，大家可以参考百度提供的这个js（http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js）

3.点击其中的数据点（maker）显示对应的详细信息

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 700px;
        }

        #r-result {
            width: 100%;
            margin-top: 5px;
        }

        .BMap_cpyCtrl {
            display: none;
        }

        .anchorBL {
            display: none;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=b6MPDAQdZRz5R62Z9XqH55pHG5vdmF7m"></script>
    <script src="http://localhost:8080/library/JQueryUI/1.11.4/external/jquery/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <script src="http://localhost:8080/library/ExtJS/4.2.1/bootstrap.js?theme=gray&lang=zh_CN" type="text/javascript"></script>
    <script src="libs/js/DrawingManager_min.js"></script>
    <link href="libs/css/DrawingManager_min.css" rel="stylesheet" />
    <title>地图展示</title>
</head>
<body>
    <div id="allmap"></div>
    <div id="r-result">
        <!--<input id="NF-add" type="button" value="添加" />-->
        <input id="NF-delete" type="button" value="删除" />
        <!--<input id="itemTree" type="button" value="显示" />-->
    </div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    var centerPt = new BMap.Point(114.31, 30.52);
    map.centerAndZoom(centerPt, 6);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.NavigationControl());   //添加地图类型控件
    map.setCurrentCity("武汉");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    //var mkr = new BMap.Marker(centerPt);

    //鼠标绘制完成回调方法,获取各个点的经纬度
    var overlays = [];
    var mlnglat = [];
    var ply;//多边形

    //生成多边形
    function polygon(path) {
        var pts = [];
        var pt;
        for (var j = 0; j < path.length; j++) {
            pt = new BMap.Point(path[j].lng, path[j].lat);
            pts.push(pt);
        }
        ply = new BMap.Polygon(pts);

        //演示：将面添加到地图上
        map.clearOverlays();
        map.addOverlay(ply);
    }

    overlaycomplete = function (e) {
        overlays.push(e.overlay);
        var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组   
        for (var i = 0; i < path.length; i++) {
            mlnglat.push("lng:" + path[i].lng + ",lat:" + path[i].lat);
        }

        //生成多边形
        polygon(path);

        //加载所有主场的地理位置坐标数据，然后判断是否在多边形内，在的话就显示
        Ext.Ajax.request({
            url: '/Handler/Farm/Location/SearchLocationHandler.ashx?option=GetLocationInfo',
            method: "POST",
            params: {
            },
            async: true,
            success: function (response) {
                result = Ext.JSON.decode(response.responseText, true);
                if (result.success) {
                    var mkr = new Array();
                    for (var k = 0; k < result.data.length; k++) {
                        var pointInfo = result.data[k];
                        mkr[k] = new BMap.Marker(new BMap.Point(result.data[k].NVC_LONGITUDE, result.data[k].NVC_LATITUDE));
                        InOrOutPolygon(result.data[k].NVC_LONGITUDE, result.data[k].NVC_LATITUDE, mkr[k], pointInfo);
                    }
                }
                else {
                    ShowErrorMsg("错误", result.message);
                }
            },
            failure: function () {
                ShowErrorMsg("错误", "请求超时或服务器错误");
            }
        });

    };

    $('#NF-add').on('click', function () {
        if (mlnglat.length == 0) {
            alert("请先设置电子围栏！");
        } else {
            alert(mlnglat);
        }
    });

    var styleOptions = {
        strokeColor: "red",    //边线颜色。
        fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,       //边线透明度，取值范围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), //偏离值
        },
        polygonOptions: styleOptions, //多边形的样式
    });
    //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);

    //2、删除电子围栏

    $('#NF-delete').on('click', function () {
        //for (var i = 0; i < overlays.length; i++) {
        //    map.removeOverlay(overlays[i]);
        //}
        //overlays.length = 0
        map.clearOverlays();
    });

    //判断点是否在多边形内
    function InOrOutPolygon(lng, lat, mk, pointInfo) {
        var pt = new BMap.Point(lng, lat);
        var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
        if (result) {//在内部，把该点显示在地图上
            var mk = new BMap.Marker(new BMap.Point(lng, lat));
            mk.setPosition(pt);
            map.addOverlay(mk);
            mk.addEventListener("click", function () {
                showInfo(this, pointInfo);
            });
        }
        else {//不在内部
            //var i = 0;
            //mk.setPosition(pt);
            //map.addOverlay(mk);
        }
    }

    //显示信息窗口，显示标注点的信息。  
    function showInfo(thisMaker, point) {
        var sContent =
        '<ul style="margin:0 0 5px 0;padding:0.2em 0">'
        + '<li style="line-height: 26px;font-size: 15px;">'
        + '<span style="width: 100px;display: inline-block;">省份：</span>' + point.NVC_PROVINCE + '</li>'
        + '<li style="line-height: 26px;font-size: 15px;">'
        + '<span style="width: 100px;display: inline-block;">服务部名称：</span>' + point.NVC_SERVICE_NAME + '</li>'
        + '<li style="line-height: 26px;font-size: 15px;">'
        + '<span style="width: 100px;display: inline-block;">养殖场主：</span>' + point.NVC_FARM_NAME + '</li>'
         + '<li style="line-height: 26px;font-size: 15px;">'
        + '<span style="width: 100px;display: inline-block;">详细地址：</span>' + point.NVC_FARM_ADDRESS + '</li>'
        + '</ul>';
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象  
        thisMaker.openInfoWindow(infoWindow);   //图片加载完毕重绘infowindow  
    }

</script>