js+jQuery判断一个点是否在多边形中

//* 计算一个点是否在多边形里
//* @param {Object} pt 标注点 例: pt = {"lat":30,"lng":40}
//* @param {Object} poly 多边形数组 
//例 poly = [{"lat":20,"lng":20},{"lat":40,"lng":40},{"lat":20,"lng":60}];
function isInsidePolygon(pt, poly) {
            for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
                ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
                (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
                (c = !c);
            return c;
        }

例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
            *{
                padding: 0px;
                margin: 0px;
            }
            #examp {
                width: 500px;
                height: 400px;
                background: #aaa;
                position: relative;
            }
            
            #examp>div {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: red;
                position: absolute;
            }
            
            #examp>.point1 {
                left: 100px;
                top: 10px;
            }
            
            #examp>.point2 {
                left: 130px;
                top: 88px;
            }
            
            #examp>.point3 {
                left: 70px;
                top: 122px;
            }
            
            #examp>.point4 {
                left: 55px;
                top: 30px;
            }
        </style>
    </head>

    <body>
        <div id="examp">
            <div class="point1"></div>
            <div class="point2"></div>
            <div class="point3"></div>
            <div class="point4"></div>
        </div>
    </body>
    <script>
        $(function(){
                $("#examp").on("mousemove", function(e) {
                //鼠标坐标
                var MousePoint = {
                    "lat": e.offsetX,
                    "lng": e.offsetY
                };
                //自定义 的4个点的坐标
                /*
                * $("#examp>.point1").offset().left与$("#examp>.point1").offset().right可能存在小数点问题
                * 可以来个取整  parseInt($("#examp>.point1").offset().left+0.5)
                * 我就不写了(重点是方法)
                * pointArr的坐标点集合,是按照上、右、下、在的方式取的(顺时针方向 取坐标)
                * 比如我取的顺序为point1=>point2=>point3=>point4
                * */
                var pointArr = [{
                    "lat":$("#examp>.point1").offset().left,
                    "lng":$("#examp>.point1").offset().top
                },{
                    "lat":$("#examp>.point2").offset().left,
                    "lng":$("#examp>.point2").offset().top
                },{
                    "lat":$("#examp>.point3").offset().left,
                    "lng":$("#examp>.point3").offset().top
                },{
                    "lat":$("#examp>.point4").offset().left,
                    "lng":$("#examp>.point4").offset().top
                }]
                
                var loop = isInsidePolygon(MousePoint,pointArr);//是否在 多边形区域内
                console.log(loop);//

            })
        })

        function isInsidePolygon(pt, poly) {
            for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
                ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
                (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
                (c = !c);
            return c;
        }
    </script>

</html>
原文地址:https://www.cnblogs.com/chen-chong/p/7819633.html