判断点在多边形内JS

1690阅读　0评论2017-08-28　nuoyazhou110
分类：JavaScript


点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="Generator" content="EditPlus?">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9.   <title>Document</title>
  10.   <script src="" type="text/javascript" ></script>
  11.  </head>
  12.  <body>
  13.   <div id="container" style="width:500px; height:300px"></div>
  14.   <input type="button" class="button" value="开始编辑多边形" onClick="editor.startEditPolygon()"/>
  15.   <input type="button" class="button" value="结束编辑多边形" onClick="editor.closeEditPolygon()"/>
  16.  </body>
  17.  <script type="text/javascript" >
  18.     var editorTool, map = new AMap.Map("container", {
  19.         resizeEnable: true,
  20.         center: [116.403322, 39.900255],//地图中心点
  21.         zoom: 13 //地图显示的缩放级别
  22.     });

  24.     var polygonArr = new Array();//多边形覆盖物节点坐标数组
  25.     polygonArr.push([116.397857, 39.910612]);
  26.     polygonArr.push([116.373567, 39.905938]);
  27.     polygonArr.push([116.378116, 39.896917]);
  28.     polygonArr.push([116.415281, 39.899485]);
  29.     var polygon = new AMap.Polygon({
  30.         path: polygonArr,//设置多边形边界路径
  31.         strokeColor: "#FF33FF", //线颜色
  32.         strokeOpacity: 0.2, //线透明度
  33.         strokeWeight: 3, //线宽
  34.         fillColor: "#1791fc", //填充色
  35.         bubble:true,
  36.         fillOpacity: 0.35//填充透明度
  37.     });
  38.     polygon.setMap(map);
  39.     
  40.     console.log(polygonArr);

  42.     var callBackFn = function(e) {
  43.         //alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
  44.         var j = polygonArr.length - 1;
  45.         var isInArea = false;
  46.         for ( i=0; i<polygonArr.length;i++ )
  47.         {
  48.             if( ( (polygonArr[i].lat < e.lnglat.getLat() && polygonArr[j].lat >= e.lnglat.getLat()) || (polygonArr[j].lat < e.lnglat.getLat() && polygonArr[i].lat >= e.lnglat.getLat()) ) ) {
  49.                 if( polygonArr[i].lng + (e.lnglat.getLat() - polygonArr[i].lat) * (polygonArr[j].lng - polygonArr[i].lng) / (polygonArr[j].lat - polygonArr[i].lat) < e.lnglat.getLng() ) {
  50.                     isInArea = !isInArea;
  51.                 }
  52.             }
  53.             j = i;
  54.         }

  56.         if( isInArea == false ) {
  57.             alert('点在多边形外');
  58.         } else {
  59.             alert('点在多边形内');
  60.         }

  62.     }
  63.     map.on('click', callBackFn);

  65.     var editor={};
  66.     editor._polygonEditor= new AMap.PolyEditor(map, polygon);
  67.     //绘制多边形开始
  68.     editor.startEditPolygon=function(){
  69.         editor._polygonEditor.open();
  70.     }
  71.     editor.closeEditPolygon=function(){
  72.         editor._polygonEditor.close();
  73.     }
  74. </script>
  75. </html>

上一篇：PHP libevent实现聊天室
下一篇：多进程监听同一个端口