Generates a corresponding enclosing polygon based on the coordinates of the input set of points.
Implementation code<!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>Display polygon</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> <script>$ (document). Ready ( function(){ varMap Map =NewAmap.map (' Mapcontainer ', {resizeenable:true, Center: [116.397428,39.90923], Zoom: -}); Map.plugin (["Amap.toolbar"], function(){Toolbar=NewAmap.toolbar (); Map.addcontrol (ToolBar); }); function add_circle(x, y, color) {Circle =NewAmap.circle ({center:NewAmap.lnglat (x, y), Radius:Ten, Strokecolor:color, Strokeopacity:1, Strokeweight:3, Fillcolor:color, Fillopacity:3}); Circle.setmap (map); } function add_marker(x, y, index){ varMarker =NewAmap.marker ({//Add custom point markersMap:map, Position: [x, Y],//Base point locationOffsetNewAmap.pixel (- -, - the),//Offset position relative to base pointDraggable:true,//Whether you can dragContent"<p style= ' font-size:10px; Color:blue ' > "+index+"</p>" //Custom point tag overlay content}); Marker.setmap (map); } function add_polygon(Polygonarr){ varPolygon =NewAmap.polygon ({Path:polygonarr,//Set polygon boundary pathStrokecolor:"#FF33FF",//Line ColorStrokeopacity:0.2,//Line TransparencyStrokeweight:3,//Line widthFillColor:"#1791fc",//Fill ColorFillopacity:0.35//Fill Transparency}); Polygon.setmap (map); } $(' #show '). Click ( function(){ varPolygonarr=New Array();varPvarPoints=$.parsejson ($ (' #content '). Val ()); Add_circle (points[0][0]/1000000, points[0][1]/1000000,"Red"); for(varI=0; i<points.length;i++) {p=points[i];varx = p[0]/1000000;vary = 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 ( -,NewAmap.lnglat (p[0]/1000000, p[1]/1000000)); }); });</script> <style> . Container { width:1300px; height:%; margin:0 auto; } #mapContainer { width: +px; height:px; margin:5px ; float:left; background-color:lightblue; } #content{ width: +px; height:px; font-size:px ; margin:5px ; float:left; } #show{width : 80 px ; height : px ; font-size : 1 2 px ; margin : 5 px 10 px ; float : left ; clear : both ; P{ float: left; Clear: both; } </style> </head> <body> <div class="container"> <H1>Show Polygon</H1> <div class="Row"> <div class="col"> <textarea id="Content" rows="$"></textarea> </div> <div class="col"> <div id="Mapcontainer"></div> </div> </div> <input type= "button" id="Show" value= "Show" /> <p>The red is the starting point, the green is the end point, the blue is the middle node, the number is the node number</P> </body></html>Draw polygons on the map
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
