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

来源：互联网发布：李明老师的linux视频编辑：程序博客网时间：2024/06/05 10:59

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

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>

阅读全文

0 0