百度地图 JS 可编辑多边形

一时失言乱红尘 2022-08-18 15:27 241阅读 0赞

业务需要 指定一个地图上的范围,为了便于采集坐标数据,开发以下程序
    
    <!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;
                } #allmap {
                    margin-right: 300px;
                    height: 100%;
                    overflow: hidden;
                } #result {
                    border-left: 1px dotted #999;
                    height: 100%;
                    width: 295px;
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    font-size: 12px;
                }
                
                dl, dt, dd, ul, li {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
                
                p {
                    font-size: 12px;
                }
                
                dt {
                    font-size: 14px;
                    font-family: "微软雅黑";
                    font-weight: bold;
                    border-bottom: 1px dotted #000;
                    padding: 5px 0 5px 5px;
                    margin: 5px 0;
                }
                
                dd {
                    padding: 5px 0 0 5px;
                }
                
                li {
                    line-height: 28px;
                } .red {
                    color: red;
                }
            </style>
            <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" type="text/css" />
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
            </script>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5E5EE28a7615536d1ffe2ce2a3667859">
            </script>
            
            <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js">
            </script>
            <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
            
            <title>百度地图绘制多边型带编辑功能</title>
        </head>
        <body>
            <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
                <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
                </div>
                <div id="panelWrap" style="width:0px;position:absolute;top:0px;right:0px;height:100%;overflow:auto;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
                    <div style="width:20px;height:200px;margin:-100px 0 0 -10px;color:#999;position:absolute;opacity:0.5;top:50%;left:50%;" id="showOverlayInfo">
                        此处用于展示覆盖物信息
                    </div>
                    <div id="panel" style="position:absolute;">
                    </div>
                </div>
            </div>
            <div id="result">
                <dl>
                    <dt>
                        操作
                    </dt>
                    <dd>
                        <ul>
                            <li>
                                <input type="button" value="重来" οnclick="iceReset();"/><input type="button" value="提交" οnclick="iceSubmit();"/>
                            </li>
                        </ul>
                    </dd>
                </dl>
            </div>
            <script type="text/javascript">
                function $(id){
                    return document.getElementById(id);
                }
                
                var bmap = {
                    status: false,
                    map: '',
                    point: '',
                    overlays: [],
                    overlaysCache: [],
                    myPolygon: '',
                    myOverlay: [],
                    drawingManager: '',
                    styleOptions: {
                        strokeColor: "red", //边线颜色。
                        fillColor: "blue", //填充颜色。当参数为空时，圆形将没有填充效果。
                        strokeWeight: 3, //边线的宽度，以像素为单位。
                        strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
                        fillOpacity: 0.3, //填充的透明度，取值范围0 - 1。
                        strokeStyle: 'solid' //边线的样式，solid或dashed。
                    },
                    /**
                     * 实例化
                     */
                    init: function(){
                        if (this.status) {
                            return;
                        }
                        this.status = true;
                        this.map = new BMap.Map('map');
                        var map = this.map;
                        var styleOptions = this.styleOptions;
                    }
                };
                
                bmap.init();
                
                var x = 116.647632, y = 39.940239;
                var delta = 0.0062;
                var range = [[x - delta, y - delta], [x + delta, y - delta], [x + delta, y + delta], [x - delta, y + delta]];
                var poly;
                
                function iceReset(){
                    if (poly) {
                        bmap.map.removeOverlay(poly);
                    }
                    var points = [];
                    for (var i in range) {
                        points.push(new BMap.Point(range[i][0], range[i][1]));
                    }
                    poly = new BMap.Polygon(points, bmap.styleOptions);
                    bmap.map.addOverlay(poly);
                    poly.enableEditing();
                }
                
                function iceSubmit(){
                    var points = [];
                    var path = poly.getPath();
                    for (var i in path) {
                        points.push('["' + path[i].lng + '","' + path[i].lat + '"]');
                    }
                    alert('[' + points.join(',') + ']');
                }
                
                window.setTimeout(function(){
                    bmap.map.centerAndZoom(new BMap.Point(x, y), 15);
                    iceReset();
                }, 500);
            </script>
        </body>
    </html>