Official example
https://lbs.amap.com/demo/javascript-api/example/mouse-operate-map/mouse-draw-overlayers
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css"> <style> html,body,#container{<!-- --> height: 100% } .input-item{<!-- --> height: 2.2rem; } .btn{<!-- --> width: 6rem; margin: 0 1rem 0 2rem; } .input-text{<!-- --> width: 4rem; margin-right:1rem; } </style> <title>Mouse tool drawing</title> </head> <body> <div id='container'></div> <div class='info'>Instructions: Circles and rectangles are drawn by dragging, and other overlays are drawn by clicking</div> <div class="input-card" style='width: 24rem;'> <div class="input-item"> <input type="radio" name='func' checked="" value='marker'><span class="input-text">Draw a dot</span> <input type="radio" name='func' value='polyline'><span class="input-text">Draw a polyline</span> <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>Draw a polygon</ span> </div> <div class="input-item"> <input type="radio" name='func' value='rectangle'><span class="input-text">Draw a rectangle</span> <input type="radio" name='func' value='circle'><span class="input-text">Draw a circle</span> </div> <div class="input-item"> <input id="clear" type="button" class="btn" value="clear" /> <input id="close" type="button" class="btn" value="Close drawing" /> </div> </div> <script src="//i2.wp.com/webapi.amap.com/maps?v=1.4.15 & amp;key=the key value you applied for& amp;plugin=AMap.MouseTool"></ script> <script type="text/javascript"> var map = new AMap.Map('container',{<!-- --> zoom:14 }); var mouseTool = new AMap.MouseTool(map); //Listen to the draw event to obtain the drawn overlay var overlays = []; mouseTool.on('draw',function(e){<!-- --> overlays.push(e.obj); }) function draw(type){<!-- --> switch(type){<!-- --> case 'marker':{<!-- --> mouseTool.marker({<!-- --> //Same as Marker's Option settings }); break; } case 'polyline':{<!-- --> mouseTool.polyline({<!-- --> strokeColor:'#80d8ff' //Same as Polyline's Option settings }); break; } case 'polygon':{<!-- --> mouseTool.polygon({<!-- --> fillColor:'#00b0ff', strokeColor:'#80d8ff' //Same as Polygon's Option settings }); break; } case 'rectangle':{<!-- --> mouseTool.rectangle({<!-- --> fillColor:'#00b0ff', strokeColor:'#80d8ff' //Same as Polygon's Option settings }); break; } case 'circle':{<!-- --> mouseTool.circle({<!-- --> fillColor:'#00b0ff', strokeColor:'#80d8ff' //Same as Circle's Option settings }); break; } } } var radios = document.getElementsByName('func'); for(var i=0;i<radios.length;i + =1){<!-- --> radios[i].onchange = function(e){<!-- --> draw(e.target.value) } } draw('marker') document.getElementById('clear').onclick = function(){<!-- --> map.remove(overlays) overlays = []; } document.getElementById('close').onclick = function(){<!-- --> mouseTool.close(true)//Close and clear the cover for(var i=0;i<radios.length;i + =1){<!-- --> radios[i].checked = false; } } </script> </body> </html>
Application
<div style="margin-top: 10px;" class="button-item" @click="handleShowLine" :id="mapChange === 3 ? 'line1' : 'line'"> </div> <div style="margin-top: 10px;" class="button-item" @click="handleShowCircle" :id="mapChange === 4 ? 'circle1' : 'circle'"> </div>
//type type of painting linePolygon(type) {<!-- --> //Create MouseTool instance var mouseTool = new AMap.MouseTool(map); console.log(mouseTool, 'mouseTool'); let that = this // After the mouse draws on the map, get the coordinates of the drawn shape. Before doing this, you need to instantiate the mouseTool.polygon() method. this.AMap.Event.addListener(mouseTool, 'draw', function (e) {<!-- --> // console.log(e, 'eee'); let arr = e.obj.getPath();//Get coordinates // console.log(arr, 'arr'); let polyList = [] let polyList1 = [] polyList = arr.map((item, index) => {<!-- --> return {<!-- --> lat: item.lat, lon:item.lng } }) // format conversion polyList1 = arr.map((item, index) => {<!-- --> return [item.lng, item.lat] }) //After drawing the polygon, you can obtain the interior points of the polygon through the interface queryP({<!-- -->}).then((res) => {<!-- --> console.log(res, 'resss'); that.Ponit= res.data mouseTool.close(true)//Close and clear the cover // [[Amap] Drawing of polygons based on longitude and latitude (drawable areas and arbitrary graphics)](https://blog.csdn.net/Xiang_Gong_Ya_/article/details/132775837?csdn_share_tail={"type": "blog","rType":"article","rId":"132775837","source":"Xiang_Gong_Ya_"}) document.getElementById('close').onclick = function () {<!-- --> mouseTool.close(true)//Close and clear the cover console.log(111); // Clear map content window.map.clearMap() } }) }); function draw(type) {<!-- --> switch (type) {<!-- --> case 'line': {<!-- --> mouseTool.polygon({<!-- --> fillColor: '#00b0ff', strokeColor: '#80d8ff' //Same as Polygon's Option settings }); break; } case 'circle': {<!-- --> mouseTool.circle({<!-- --> fillColor: '#00b0ff', strokeColor: '#80d8ff' //Same as Circle's Option settings }); break; } } } draw(type) // clear document.getElementById('clear').onclick = function () {<!-- --> window.map.remove(overlays) overlays = []; } },