地图上绘制多边形

来源：互联网发布：表格算量软件编辑：程序博客网时间：2024/04/29 06:26
根据输入的一组点的坐标，生成对应的封闭多边形。
实现代码

<!doctype html><html>    <head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">        <title>显示多边形</title>        <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>        <script src="http://webapi.amap.com/maps?v=1.3&key=5bc7ab8efc62334c67887ecd3c21a3a7"></script>        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>                <script src="http://code.jquery.com/jquery-latest.js"></script>        <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>        <script>        $(document).ready(function(){                var map;                map = new AMap.Map('mapContainer', {                    resizeEnable: true,                    center: [116.397428, 39.90923],                    zoom: 13                });                map.plugin(["AMap.ToolBar"],function(){                    toolBar=new AMap.ToolBar();                    map.addControl(toolBar);                });            function add_circle(x, y, color) {                circle = new AMap.Circle({                    center:new AMap.LngLat(x, y),                    radius:10,                    strokeColor: color,                    strokeOpacity: 1,                    strokeWeight: 3,                    fillColor: color,                    fillOpacity: 3                });                circle.setMap(map);            }            function add_marker(x, y, index){                var marker = new AMap.Marker({ //添加自定义点标记                    map: map,                    position: [x, y], //基点位置                    offset: new AMap.Pixel(-5, -5), //相对于基点的偏移位置                    draggable: true,  //是否可拖动                    content: "<p style='font-size:10px; color:blue'>"+index+"</p>"   //自定义点标记覆盖物内容                });                marker.setMap(map);            }            function add_polygon(polygonArr){                var  polygon = new AMap.Polygon({                    path: polygonArr,//设置多边形边界路径                    strokeColor: "#FF33FF", //线颜色                    strokeOpacity: 0.2, //线透明度                    strokeWeight: 3,    //线宽                    fillColor: "#1791fc", //填充色                    fillOpacity: 0.35//填充透明度                });                polygon.setMap(map);            }            $('#show').click(function(){                //map.clearMap();                var polygonArr=new Array();                var p;                var points=$.parseJSON($('#content').val());                add_circle(points[0][0]/1000000, points[0][1]/1000000, "red");                for(var i=0;i<points.length;i++) {                    p=points[i];                    var x = p[0]/1000000;                    var y = p[1]/1000000;                    polygonArr.push([x, y]);                    add_circle(x, y, 'blue');                    add_marker(x, y, i);                }                 add_polygon(polygonArr);                add_circle(p[0]/1000000, p[1]/1000000, "green");                 map.setZoomAndCenter(13, new AMap.LngLat(p[0]/1000000, p[1]/1000000));            });                        });        </script>        <style>            #content {                height: 600px;                width: 100%;            }            #mapContainer {                height: 600px;            }        </style>    </head>    <body>        <div class="container">            <div class="page-header">                <h1>显示多边形</h1>            </div>            <div class="row">                <div class="col-md-5">                    <textarea id="content" placeholder="[[116530000,39540000],[116330000,39640000],[116510000,39840000],[116730000,39560000]]"></textarea>                </div>                <div class="col-md-7">                    <div id="mapContainer"></div>                </div>            </div>            <row class="row">                <input type= "button" id="show" value="Show" class="btn btn-default col-md-1"/>                <span class="text-danger col-md-6">红色为起点，绿色为终点，蓝色为中间结点，数字为结点编号</span>            </row>    </body></html>
实现效果

显示多边形
1 0