地图根据POI获取轮廓坐标集合(The map obtains the contour coordinate set according to the POI)

百度地图方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度地图DEMO</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图ak"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        var queryHouseOutline = function(hid, callback) {
            var baseURL = 'http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18';
            var url = baseURL + "&uid=" + hid;
            callback && (window.queryHouseOutlineCallback = callback);
            $.ajax({
                type: "get",
                async: false,
                url: url,
                dataType: "jsonp",
                jsonpCallback: "queryHouseOutlineCallback",
                success: function(datas) {}
            });
        };
        /**
         * 模糊查询小区信息, 无返回值
         * @param {} house  小区名称
         * @param {} city   所属城市名称
         * @param {} ak     百度地图AK
         * @param {} callback   回调函数,该函数可以接收到请求的返回值
         */
        var queryHouse = function(house, city, ak, callback) {
            var baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2';
            var url = baseURL + "&q=" + house + "®ion=" + city + "&ak=" + ak;
            callback && (window.queryHouseCallback = callback);
            $.ajax({
                type: "get",
                async: false,
                url: url,
                dataType: "jsonp",
                jsonpCallback: "queryHouseCallback",
                success: function(datas) {}
            });
        };
        /**
         * 墨卡托坐标转百度坐标
         * @param {} coordinate
         * @return {}
         */
        var coordinateToPoints = function(map, coordinate) {
            var points = [];
            if (coordinate) {
                var arr = coordinate.split(";");
                if (arr) {
                    for (var i = 0; i < arr.length; i++) {
                        var coord = arr[i].split(",");
                        if (coord && coord.length == 2) {
                            var mctXY = new BMap.Pixel(coord[0], coord[1]);
                            var project = map.getMapType().getProjection();
                            var point = project.pointToLngLat(mctXY);
                            points.push(new BMap.Point(point.lng, point.lat));
                        }
                    }
                }
            }
            return points;
        };
        /**
         * 墨卡托坐标解析
         * @param {} mocator
         * @return {}
         */
        var parseGeo = function(mocator) {
            if (typeof mocator != 'string') {
                return {};
            }
            var t = mocator.split("|");
            var n = parseInt(t[0]);
            var i = t[1];
            var r = t[2];
            var o = r.split(";");
            if (n === 4) {
                for (var a = [], s = 0; s < o.length - 1; s++) {
                    "1" === o[s].split("-")[0] && a.push(o[s].split("-")[1]);
                }
                o = a;
                o.push("");
            }
            var u = [];
            switch (n) {
                case 1:
                    u.push(o[0]);
                    break;
                case 2:
                case 3:
                case 4:
                    for (var s = 0; s < o.length - 1; s++) {
                        var l = o[s];
                        if (l.length > 100) {
                            l = l.replace(/(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*),(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*)(,)/g,
                                "$1,$2;");
                            u.push(l);
                        } else {
                            for (var c = [], d = l.split(","), f = 0; f < d.length; f += 2) {
                                var p = d[f];
                                var h = d[f + 1];
                                c.push(p + "," + h);
                            }
                            u.push(c.join(";"))
                        }
                    }
                    break;
                default:
                    break;
            }
            if (u.length <= 1) {
                u = u.toString();
            }
            var result = {
                type: n,
                bound: i,
                points: u
            };
            return result;
        };
        var map = new BMap.Map("allmap"); // 创建Map实例
        map.centerAndZoom("北京", 19);
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

        map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放

        /**
         * 第一个参数是城市名,第二参数是小区名 
         */
        var showArea = function(city, area) {
            queryHouse(area, city, "百度地图ak", function(data) {
                if (data.message == 'ok') {
                    var houses = data.results;
                    if (houses && houses.length > 0) {
                        var house = houses[0];
                        queryHouseOutline(house.uid, function(houseOutline) {
                            console.log(houseOutline)
                            var geo = houseOutline.content.geo;
                            if (!geo) {
                                var location = house.location;
                                var point = new BMap.Point(location.lng, location.lat);
                                map.centerAndZoom(point, 19);
                                var marker = new BMap.Marker(point);
                                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                                map.addOverlay(marker);
                            } else {
                                map.clearOverlays();
                                var geoObj = parseGeo(geo);
                                //边界点
                                var points = coordinateToPoints(map, geoObj.points);
                                var ply = new BMap.Polygon(points, {
                                    strokeWeight: 2,
                                    strokeColor: "#F01B2D",
                                    strokeOpacity: 0.9,
                                    fillColor: "transparent"
                                }); //建立多边形覆盖物
                                
                                
                                // let arr = ''
                                // ply.Bo.forEach(a=>{
                                //     // arr.push([a.lng,a.lat])
                                //     arr+=arr?(','+a.lng+','+a.lat):(a.lng+','+a.lat)
                                // }) //用来把轮廓集合根据需要的格式进行打印出来
                                // console.log(arr)
                                console.log(ply.Bo)
                                
                                
                                map.addOverlay(ply); //添加覆盖物
                                map.setViewport(ply.getPath()); //调整视野 
                            }
                        });
                    }
                }
            });
        };
        showArea($('#cityId').val(), $('#areaId').val());
        $('#showBtn').click(function() {
            debugger;
            showArea($('#cityId').val(), $('#areaId').val());
        });
        $("#areaId").keydown(function(e) {
            if (event.keyCode == "13") {
                showArea($('#cityId').val(), $('#areaId').val());
            }
        })
    });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>城市:</td>
            <td>
                <input id="cityId" type="text" value="重庆" />
            </td>
            <td>小区:</td>
            <td>
                <input id="areaId" type="text" value="江北机场" />
            </td>
            <td>
                <button id="showBtn">显示</button>
            </td>
        </tr>
    </table>
    <div id="allmap" style="width: 90vw; height: 90vh;"></div>
</body>
</html>
————————

Baidu map method

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度地图DEMO</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图ak"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        var queryHouseOutline = function(hid, callback) {
            var baseURL = 'http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18';
            var url = baseURL + "&uid=" + hid;
            callback && (window.queryHouseOutlineCallback = callback);
            $.ajax({
                type: "get",
                async: false,
                url: url,
                dataType: "jsonp",
                jsonpCallback: "queryHouseOutlineCallback",
                success: function(datas) {}
            });
        };
        /**
         * 模糊查询小区信息, 无返回值
         * @param {} house  小区名称
         * @param {} city   所属城市名称
         * @param {} ak     百度地图AK
         * @param {} callback   回调函数,该函数可以接收到请求的返回值
         */
        var queryHouse = function(house, city, ak, callback) {
            var baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2';
            var url = baseURL + "&q=" + house + "®ion=" + city + "&ak=" + ak;
            callback && (window.queryHouseCallback = callback);
            $.ajax({
                type: "get",
                async: false,
                url: url,
                dataType: "jsonp",
                jsonpCallback: "queryHouseCallback",
                success: function(datas) {}
            });
        };
        /**
         * 墨卡托坐标转百度坐标
         * @param {} coordinate
         * @return {}
         */
        var coordinateToPoints = function(map, coordinate) {
            var points = [];
            if (coordinate) {
                var arr = coordinate.split(";");
                if (arr) {
                    for (var i = 0; i < arr.length; i++) {
                        var coord = arr[i].split(",");
                        if (coord && coord.length == 2) {
                            var mctXY = new BMap.Pixel(coord[0], coord[1]);
                            var project = map.getMapType().getProjection();
                            var point = project.pointToLngLat(mctXY);
                            points.push(new BMap.Point(point.lng, point.lat));
                        }
                    }
                }
            }
            return points;
        };
        /**
         * 墨卡托坐标解析
         * @param {} mocator
         * @return {}
         */
        var parseGeo = function(mocator) {
            if (typeof mocator != 'string') {
                return {};
            }
            var t = mocator.split("|");
            var n = parseInt(t[0]);
            var i = t[1];
            var r = t[2];
            var o = r.split(";");
            if (n === 4) {
                for (var a = [], s = 0; s < o.length - 1; s++) {
                    "1" === o[s].split("-")[0] && a.push(o[s].split("-")[1]);
                }
                o = a;
                o.push("");
            }
            var u = [];
            switch (n) {
                case 1:
                    u.push(o[0]);
                    break;
                case 2:
                case 3:
                case 4:
                    for (var s = 0; s < o.length - 1; s++) {
                        var l = o[s];
                        if (l.length > 100) {
                            l = l.replace(/(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*),(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*)(,)/g,
                                "$1,$2;");
                            u.push(l);
                        } else {
                            for (var c = [], d = l.split(","), f = 0; f < d.length; f += 2) {
                                var p = d[f];
                                var h = d[f + 1];
                                c.push(p + "," + h);
                            }
                            u.push(c.join(";"))
                        }
                    }
                    break;
                default:
                    break;
            }
            if (u.length <= 1) {
                u = u.toString();
            }
            var result = {
                type: n,
                bound: i,
                points: u
            };
            return result;
        };
        var map = new BMap.Map("allmap"); // 创建Map实例
        map.centerAndZoom("北京", 19);
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

        map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放

        /**
         * 第一个参数是城市名,第二参数是小区名 
         */
        var showArea = function(city, area) {
            queryHouse(area, city, "百度地图ak", function(data) {
                if (data.message == 'ok') {
                    var houses = data.results;
                    if (houses && houses.length > 0) {
                        var house = houses[0];
                        queryHouseOutline(house.uid, function(houseOutline) {
                            console.log(houseOutline)
                            var geo = houseOutline.content.geo;
                            if (!geo) {
                                var location = house.location;
                                var point = new BMap.Point(location.lng, location.lat);
                                map.centerAndZoom(point, 19);
                                var marker = new BMap.Marker(point);
                                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                                map.addOverlay(marker);
                            } else {
                                map.clearOverlays();
                                var geoObj = parseGeo(geo);
                                //边界点
                                var points = coordinateToPoints(map, geoObj.points);
                                var ply = new BMap.Polygon(points, {
                                    strokeWeight: 2,
                                    strokeColor: "#F01B2D",
                                    strokeOpacity: 0.9,
                                    fillColor: "transparent"
                                }); //建立多边形覆盖物
                                
                                
                                // let arr = ''
                                // ply.Bo.forEach(a=>{
                                //     // arr.push([a.lng,a.lat])
                                //     arr+=arr?(','+a.lng+','+a.lat):(a.lng+','+a.lat)
                                // }) //用来把轮廓集合根据需要的格式进行打印出来
                                // console.log(arr)
                                console.log(ply.Bo)
                                
                                
                                map.addOverlay(ply); //添加覆盖物
                                map.setViewport(ply.getPath()); //调整视野 
                            }
                        });
                    }
                }
            });
        };
        showArea($('#cityId').val(), $('#areaId').val());
        $('#showBtn').click(function() {
            debugger;
            showArea($('#cityId').val(), $('#areaId').val());
        });
        $("#areaId").keydown(function(e) {
            if (event.keyCode == "13") {
                showArea($('#cityId').val(), $('#areaId').val());
            }
        })
    });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>城市:</td>
            <td>
                <input id="cityId" type="text" value="重庆" />
            </td>
            <td>小区:</td>
            <td>
                <input id="areaId" type="text" value="江北机场" />
            </td>
            <td>
                <button id="showBtn">显示</button>
            </td>
        </tr>
    </table>
    <div id="allmap" style="width: 90vw; height: 90vh;"></div>
</body>
</html>