地图上绘制多边形

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 "+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 div h1 显示多边形 /h1 /div div div textarea id="content" placeholder="[[116530000,39540000],[116330000,39640000],[116510000,39840000],[116730000,39560000]]" /textarea /div div div id="mapContainer" /div /div /div row input type= "button" id="show" value="Show" / span 红色为起点，绿色为终点，蓝色为中间结点，数字为结点编号 /span /row /body /html