高德地圖web js實現畫多邊形,圓。判斷一個點是否在多邊形或圓裡
阿新 • • 發佈:2018-12-17
<!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"/> <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>