<!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"/> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/AMap.DrivingRender1120.css"/> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> #container{ width:84%; height: 100%; position:relative; overflow: hidden; float: right; } #tool{ width: 16%; height: 100%; overflow: auto; box-shadow:0 0 14px rgba(0,0,100,.2); height: 100%; background-color: white; float: right; z-index: 9999; } </style> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=3f106cab686aa907fae5d023cca93351&plugin=AMap.Driving,AMap.MouseTool,AMap.PolyEditor,AMap.ToolBar"></script> <script type="text/javascript" src="http://cache.amap.com/lbs/static/DrivingRender1230.js"></script> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script></head><body> <div id="container"></div><div id="tool"> <center> <button id="circle">画圆</button> <button id="rectangle">矩形</button> <button id="polygon">多边形</button> <button id="closeMouse">清除</button> <button id="testCircle">判断一个点是否在一个圆里</button> <button id="testPolygon">判断一个点是否在一个多边形里</button> </center></div><div id="panel"> </div><div style="height: 10%;float: left"></div><script src="./jquery.min.js"></script><script type="text/javascript"> var status; var map = new AMap.Map("container", { resizeEnable: true }); map.plugin(["AMap.ToolBar"],function(){ //在地图中添加ToolBar插件 toolBar = new AMap.ToolBar(); map.addControl(toolBar); }); toolBar.hide(); map.plugin(["AMap.MouseTool"],function(){ //鼠标工具插件 mousetool = new AMap.MouseTool(map); }); $('#circle').click(function(){ status = 'circle'; mousetool.circle(); }); $('#rectangle').click(function(){ status = 'rectangle'; mousetool.rectangle(); }); $('#polygon').click(function(){ status = 'polygon'; mousetool.polygon(); }); AMap.event.addListener(mousetool, 'draw', function(e) { //arr = e.obj.getPath();//获取路径坐标 if(status == 'circle'){ lng = e.obj.getCenter().lng; lat = e.obj.getCenter().lat; radius = e.obj.getRadius(); }else if(status == 'polygon' || status == 'rectangle'){ var path = e.obj.getPath(); arr = []; for(var i=0;i<path.length;i++){ arr.push([path[i].lng,path[i].lat]); } console.log(arr); } //console.log(e.obj.getRadius()); //console.log(e.obj); }); $('#closeMouse').click(function(){ mousetool.close(true); }); var lat; var lng; var radius; $('#testCircle').click(function(){ var myLngLat = new AMap.LngLat(116.403984,39.907535); var circle = new AMap.Circle({ center: new AMap.LngLat(lng,lat),// 圆心位置 radius: radius //半径 }); if(circle.contains(myLngLat)){ alert('在'); }else{ alert('不在'); } }); var arr = []; $('#testPolygon').click(function(){ var myLngLat = new AMap.LngLat(116.403984,39.907535); // 定义一个多边形 var polygon = new AMap.Polygon({ path: arr }); if(polygon.contains(myLngLat)){ alert('在'); }else{ alert('不在'); } });</script></body></html>
文章地址：https://wenmayi.cn/post/450.html