其他分享
首页 > 其他分享> > 自定义百度地图区域边界获取

自定义百度地图区域边界获取

作者:互联网

以常州市新北区为例
必须加上百度地图的api

<!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: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=xxxxxxxx"></script>
    <title>自定义区域边界获取</title>
</head>
<body>
    <div id="allmap" style="height:80%;width:100%;"></div>
    <input type="button" onclick="getpoints()" value="点击获取集合(F12下查看结果)" />
    <input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" />
    <!--<input type="button" οnclick="map.clearOverlays(); document.getElementById('info').innerHTML = ''; points = [];" value="清除" />-->
    <br />
    <textarea id="info" style="height:130px;width:100%;"></textarea>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(120.49, 31.15), 12);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("常州市新北区");          // 设置地图显示的城市 此项是必须设置的

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.enableContinuousZoom(true);    //启用地图惯性拖拽,默认禁用

    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })); //向地图中添加比例尺控件//------------------------ 显示镇级范围 ------------------
    var polygons = [];

    function getBoundary() {
        var bdary = new BMap.Boundary();
        bdary.get("常州市新北区", function (rs) {       //获取行政区域
            //map.clearOverlays();        //清除地图覆盖物
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
                //ply.enableEditing();  //范围可编辑
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
            map.setViewport(pointArray);    //调整视野
            addlabel();
        });


        var areas = [];
        var 春江镇 = "119.793202,32.041939;119.783429,32.021369;119.785154,32.011082;119.919684,32.013531;119.904161,32.04145;119.905886,32.052713;119.893238,32.047326;119.882314,32.051733;119.880015,32.059078;119.875415,32.062505;119.855293,32.063974;119.842645,32.060547;119.830572,32.058588;119.80815,32.061526;119.796652,32.049775;119.794352,32.042919;";

        var 孟河镇 = "119.790325,32.01131;119.783426,31.985832;119.934054,32.005431;119.913357,32.014249;119.790325,32.015229;";

        var 新桥镇 = "119.783426,31.985832;119.774802,31.962798;119.784001,31.946622;119.86219,31.994652;119.785151,31.986322;";

        var 薛家镇 = "119.842068,31.981912;119.879437,31.960347;119.918531,31.954956;119.978898,31.962308;119.9605,32.005921;119.93118,32.00886;119.932904,32.005921;119.864489,31.996612;119.843792,31.982892;"

        var 罗溪镇 = "119.96165,32.007391;119.978898,31.967209;120.018567,31.97113;120.019142,31.979462;120.020866,31.976521;119.990971,32.01131;119.985796,32.018658;119.9605,32.01033;119.9605,32.01033;119.9605,32.01033;";

        var 西夏墅镇 = "119.785151,31.947112;119.798374,31.935836;119.916807,31.954465;119.879437,31.962308;119.843217,31.981912;119.786301,31.949073;";

        var 奔牛镇 = "119.883462,31.947602;119.89611,31.899057;119.814472,31.860791;119.781701,31.856865;119.777677,31.856374;119.770203,31.865698;119.771353,31.87502;119.761579,31.888756;119.758705,31.895623;119.768478,31.897585;119.777677,31.906904;119.787451,31.908376;119.7886,31.920636;119.770778,31.922597;119.769053,31.931914;119.788026,31.929462;119.794925,31.929952;119.800674,31.937307;119.883462,31.948583;119.883462,31.948583;";

        var 河海街道 = "119.882887,31.948583;119.895535,31.900038;120.016842,31.88336;120.021441,31.889737;120.008218,31.899057;120.005344,31.902;120.009943,31.916713;120.026615,31.92603;120.013967,31.939758;120.019142,31.96966;119.978898,31.96819;119.980622,31.963288;119.882887,31.950054;";

        var 三井街道 = "119.923131,31.893661;119.909333,31.851467;119.900134,31.85343;119.899559,31.850976;119.89611,31.854902;119.880012,31.830363;119.866789,31.836253;119.850691,31.81809;119.831719,31.822018;119.815047,31.81269;119.811597,31.811708;119.805273,31.816126;119.800099,31.815636;119.796074,31.819072;119.797224,31.833798;119.808435,31.840425;119.807573,31.845087;119.817346,31.858828;119.811597,31.860791;119.89611,31.899547;119.923993,31.895869;119.923131,31.894888;";

        var 龙虎塘街道 = "119.923418,31.895869;119.90962,31.852448;119.915082,31.85024;119.917094,31.840425;119.934629,31.830363;119.931754,31.817599;119.947277,31.810726;119.957051,31.810726;119.956763,31.813672;119.962512,31.81539;119.963662,31.814163;119.982634,31.808762;119.985796,31.804343;119.986659,31.801397;120.001319,31.811953;120.016267,31.815636;120.018567,31.822018;120.012818,31.830363;120.009655,31.83478;120.012818,31.843615;120.007356,31.846069;120.005919,31.852939;119.995283,31.860055;120.009943,31.866188;120.009943,31.869132;120.015117,31.872076;120.019429,31.878209;120.020004,31.883115;120.016267,31.88385;119.923418,31.896114;";

        areas.push(春江镇);
        areas.push(孟河镇);
        areas.push(新桥镇);
        areas.push(薛家镇);
        areas.push(罗溪镇);
        areas.push(西夏墅镇);
        areas.push(奔牛镇);
        areas.push(河海街道);
        areas.push(三井街道);
        areas.push(龙虎塘街道);

        colors = ["#fff492", "#fff492", "#98d057", "#e19ee6", "#1ad3da", "#ffc11d", "#98e800", "#b95817", "#03a9f4", "#39d0a4", "#8bbb53"];

        var pointArray = [];
        for (var i = 0; i < areas.length; i++) {
            var ply = new BMap.Polygon(areas[i], { strokeWeight: 1, strokeColor: "#ff0000" }); //建立多边形覆盖物
            ply.setFillColor(colors[i])   //设置多边形的填充颜色
            ply.setFillOpacity(0.35);

            polygons.push(ply);  //加入多边形数组,以之后获取多边形边界点集

            //if (i == 3) {
            //    ply.enableEditing();  //范围可编辑 【编辑的时候开启】
            //}

            map.addOverlay(ply);  //添加覆盖物
            pointArray = pointArray.concat(ply.getPath());
        }
        map.setViewport(pointArray);    //调整视野
        addlabel();
    }

    setTimeout(function () {
        getBoundary();
    }, 1000);

    function addlabel() {
        var pointArray = [
          new BMap.Point(119.839914, 32.034165),  //春江镇
          new BMap.Point(119.820221, 32.004451),  //孟河镇
          new BMap.Point(119.800099, 31.975541),  //新桥镇
          new BMap.Point(119.904158, 31.979952),  //薛家镇
          new BMap.Point(119.987521, 31.989262),  //罗溪镇
          new BMap.Point(119.819071, 31.953485),  //西夏墅镇
          new BMap.Point(119.804698, 31.900528),  //奔牛镇
          new BMap.Point(119.934054, 31.928482),  //河海街道
          new BMap.Point(119.838618,31.85343),  //三井街道
          new BMap.Point(119.938366, 31.858828)   //龙虎塘街道
        ];
        var optsArray = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
        var labelArray = [];
        var contentArray = [
          "春江镇", "孟河镇", "新桥镇", "薛家镇", "罗溪镇", "西夏墅镇", "奔牛镇", "河海街道", "三井街道", "龙虎塘街道"];
        for (var i = 0; i < pointArray.length; i++) {
            optsArray[i].position = pointArray[i];
            labelArray[i] = new BMap.Label(contentArray[i], optsArray[i]);
            labelArray[i].setStyle({
                color: "red",
                fontSize: "12px",
                height: "20px",
                lineHeight: "20px",
                fontFamily: "微软雅黑"
            });
            map.addOverlay(labelArray[i]);
        }
    }

    //获取编辑后的边界点集【编辑完后,可以通过 button 来触发这个方法】
    function getpoints() {
        for (var j = 0; j < polygons.length; j++) {
            var polyline = polygons[j];
            var pts = polyline.getPath();

            var sss = "";
            for (var i = 0; i < pts.length; i++) {
                sss += pts[i].lng + "," + pts[i].lat + ";";
            }
            console.log(sss);   //【将点集输出到控制台】
        }

        alert('已输出边界点集合!');
    }



    //以下为绘制边界
    var key = 1;    //开关
    var newpoint;   //一个经纬度
    var points = [];    //数组,放经纬度信息
    var polyline = new BMap.Polyline(); //折线覆盖物

    function startTool() {   //开关函数
        if (key == 1) {
            document.getElementById("startBtn").value = "开启状态";
            key = 0;
        }
        else {
            document.getElementById("startBtn").value = "关闭状态";
            key = 1;
        }
    }
    map.addEventListener("click", function (e) {   //单击地图,形成折线覆盖物
        newpoint = new BMap.Point(e.point.lng, e.point.lat);
        if (key == 0) {
            //    if(points[points.length].lng==points[points.length-1].lng){alert(111);}
            points.push(newpoint);  //将新增的点放到数组中
            polyline.setPath(points);   //设置折线的点数组
            map.addOverlay(polyline);   //将折线添加到地图上
            document.getElementById("info").innerHTML += e.point.lng + "," + e.point.lat + ";";    //输出数组里的经纬度
        }
    });
    map.addEventListener("dblclick", function (e) {   //双击地图,形成多边形覆盖物
        if (key == 0) {
            map.disableDoubleClickZoom();   //关闭双击放大
            var polygon = new BMap.Polygon(points);
            map.addOverlay(polygon);   //将折线添加到地图上
        }
    });
</script>

标签:map,边界,自定义,Point,BMap,var,new,百度,areas
来源: https://blog.csdn.net/weixin_45152566/article/details/121380186