百度地图 JS 可编辑多边形

最新推荐文章于 2020-06-24 22:05:26 发布

蓝冰大侠

最新推荐文章于 2020-06-24 22:05:26 发布

阅读量3k

点赞数 1

本文链接：https://blog.csdn.net/bluehire/article/details/50417663

版权

业务需要 指定一个地图上的范围,为了便于采集坐标数据,开发以下程序

<!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>