百度地图需要自己描点得到自己的某一区域

ゝ一纸荒年。 2023-05-29 11:59 3阅读 0赞

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script>
        <title>获取地区轮廓线</title>
    </head>
    <body>
    <div id="allmap" style="height:700px;width:800px;"></div>
    <input id="site"  type="text">
    <input id="longitude"  type="text" value="121.047817">
    <input id="latitude"  type="text" value="31.395795">
    <script>
        var marker2;
        var map = new BMap.Map("allmap");
        var cityName = '昆山';
        map.centerAndZoom(cityName, 12);                     // 初始化地图,设置中心点坐标和地图级别。    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
        map.enableScrollWheelZoom(true);
        var geoc = new BMap.Geocoder();
        map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250)}));
        var bdary = new BMap.Boundary();
        bdary.get(cityName, function (rs) {       //获取行政区域
            var EN_JW = "180, 90;";         //东北角
            var NW_JW = "-180,  90;";       //西北角
            var WS_JW = "-180, -90;";       //西南角
            var SE_JW = "180, -90;";        //东南角
            //4.添加环形遮罩层
            var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物
            map.addOverlay(ply1);
            //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
            var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" });
            map.addOverlay(ply);
            //map.setViewport(ply.getPath());    //调整视野
            map.addEventListener("click", function(e){
                map.removeOverlay(marker2)
                //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
                var pt = e.point;
                console.log(pt)
                var point = new BMap.Point(pt.lng, pt.lat);
                marker2 = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker2);               // 将标注添加到地图中
                marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                geoc.getLocation(pt, function(rs){
                    //addressComponents对象可以获取到详细的地址信息
                    var addComp = rs.addressComponents;
                    var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
                    //将对应的HTML元素设置值
                    document.getElementById("site").value=site;
                    document.getElementById("longitude").value=rs.point.lng;
                    document.getElementById("latitude").value=rs.point.lat;
                });
            })
            getBoundary()
            function getBoundary() {
                var areas = [];
               // areas.push("120.983962,31.500796;120.956366,31.493899;120.924171,31.489958;120.909223,31.484045;120.909223,31.461378;120.901174,31.44462;120.883927,31.429831;120.883927,31.425887;120.917272,31.425887;120.916122,31.409123;120.872428,31.409123;120.872428,31.397288;120.856331,31.390383;120.848282,31.384464;120.829885,31.384464;120.828735,31.402219;120.840233,31.461378;120.821836,31.501781;120.825285,31.511633;120.819536,31.511633;120.820686,31.518528;120.816087,31.519513;120.818386,31.520499;120.821836,31.522469;120.824136,31.525424;120.854031,31.526409;120.857481,31.519513;120.857481,31.511633;120.871279,31.513603;120.874728,31.509663;120.877028,31.518528;120.885077,31.526409;120.887376,31.537243;120.896575,31.539212;120.903474,31.543151;120.906923,31.546106;120.912673,31.537243;120.912673,31.535273;120.916122,31.529363;120.941418,31.531333;120.944868,31.538227;120.951767,31.528378;120.955216,31.522469;120.967864,31.506707")
               // areas.push("120.943757,31.42045;120.95928,31.420943;120.9955,31.416999;121.019646,31.411575;121.019071,31.395302;121.017921,31.356826;121.026545,31.332647;121.001824,31.327711;120.973653,31.338075;120.935134,31.340049;120.933409,31.361759;120.933409,31.38889;120.932259,31.408617")
                areas.push("120.935134,31.396781;120.96158,31.398754;120.97969,31.396288;121.000961,31.392342;121.018496,31.393329;121.020221,31.402699;121.008723,31.418971;120.977102,31.419957;120.950656,31.42045;120.935134,31.415027")
                colors = ["#fff492"];
                var pointArray = [];
                for (var i = 0; i < areas.length; i++) {
                    var ply = new BMap.Polygon(areas[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
                    if (i !== 0) {
                        ply.setFillColor(colors[i])   //设置多边形的填充颜色
                    }
                    ply.setFillOpacity(0.35);
    
                 //   polygons.push(ply);  //加入多边形数组，以之后获取多边形边界点集
    
                    map.addOverlay(ply);  //添加覆盖物
                    pointArray = pointArray.concat(ply.getPath());
                }
                addlabel();
            }
      });
        function addlabel() {
            var pointArray = [
                new BMap.Point(120.868916,31.48535), //巴城镇
                new BMap.Point(120.934456,31.398594), //玉山镇
                new BMap.Point(120.996547,31.479438), //周市镇
                new BMap.Point(121.055188,31.405498), //昆山技术经济开发区
                new BMap.Point(121.057488,31.350251), //陆家镇
                new BMap.Point(121.11268,31.316693), // 花桥镇
                new BMap.Point(120.931007,31.302871), //张浦镇
                new BMap.Point(121.014944,31.260406), //千灯镇
                new BMap.Point(120.916059,31.197166), //锦溪镇
                new BMap.Point(121.012645,31.184315), //淀山湖镇
                new BMap.Point(120.848219,31.159597) // 周庄镇
            ];
            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]);
            }
        }
        function init() {
            var point = new BMap.Point('120.985726', '31.381985');
            marker2 = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker2);               // 将标注添加到地图中
            marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            geoc.getLocation(point, function(rs)
            {
                var xiangxi = rs.addressComponents;
                var adress=xiangxi.province + ", " + xiangxi.city + ", " + xiangxi.district + ", " + xiangxi.street + ", " + xiangxi.streetNumber; //创建信息窗口
                document.getElementById("site").value=adress;
            });
        }
        init()
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191106100733286.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70