Question

我正在尝试使用它： JS- Check if Point Inside A Polygon

以确定点是否位于Google地图上的用户绘制多边形内（嵌入在Salesforce visualforce页面中）。但是，它总是返回false，即使该点明显位于我绘制的多边形内。

当我使用注释掉的硬编码多边形坐标对其进行测试时，它可以正常工作。

知道我做错了什么吗？

这是我的javascript / visualforce页面：

<apex:page controller="ControllerJSGeoMaps" docType="html-5.0">
<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<apex:includeScript value="https://c.na16.visual.force.com/resource/1466633623000/connection"/>

<script type="text/javascript" src="/soap/ajax/24.0/apex.js"></script> 


<script type="text/javascript"> 

$(document).ready(function() {

sforce.connection.sessionId = "{!$Api.Session_ID}";
         var myOptions = {
             zoom: 10,
             mapTypeId: google.maps.MapTypeId.HYBRID,
             mapTypeControl: true,
             scrollwheel: false,
             center:{lat: 33.9037779, lng: -118.3892208}
         }
         var map;

 var polygonArray = [];
        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        map.setTilt(45); 
 //Draw polygon
initMap();
      function initMap() {

        var drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.MARKER,
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['polygon']
          }

        });
        drawingManager.setMap(map);
 google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
          for (var i = 0; i < polygon.getPath().getLength(); i++) {
           var poly=polygon.getPath().b[i];
            console.log("poly point "+i+"::"+poly.toString());
            polygonArray.push(poly);
        }



        console.log("polygonArray::"+polygonArray);
polyPrint();


});

function polyPrint(){
for (var j=0; j<polygonArray.length;j++){
var polygon = [ polygonArray[j] ];
//var polygon =  [ [33.963864308201565, -118.5040283203125],[34.02648590051866, -118.36807250976562],[33.871555787081476, -118.26507568359375],[33.80653802509606, -118.46282958984375]];
var point=[ 33.9037779, -118.3892208 ];
var hide=inside(point, polygon);
console.log("true/false::"+hide+" point::"+point+" polyArray[j]::"+polygon);
}//j

}//function

      }
      /////////////////////////
      function inside(point, vs) {
    // ray-casting algorithm based on
    // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

    var x = point[0], y = point[1];

    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];

        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }

    return inside;
};

     });//readyfunction
</script>

<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:800px;
  background:transparent;
}
</style>

</head>

<body>
<div id="map"></div> 


</body>



</apex:page>

Answer 1

您可以使用几何库的contains方法检查该点是否在多边形内：

// point needs to be an object of type  google.maps.LatLng class 
// polygon needs to an object of type google.maps.Polygon class
function inside(point, polygon) {
   return google.maps.geometry.poly.containsLocation(point, polygon)
}

要使用此方法，您需要包含几何库：

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=drawing,geometry"></script>

Answer 2

您使用的功能不正确。

function polyPrint(){
  for (var j=0; j<polygonArray.length;j++){
    var polygon = [ polygonArray[j] ];
    //var polygon =  [ [33.963864308201565, -118.5040283203125],[34.02648590051866, -118.36807250976562],[33.871555787081476, -118.26507568359375],[33.80653802509606, -118.46282958984375]];
    var point=[ 33.9037779, -118.3892208 ];
    var hide=inside(point, polygon);
    console.log("true/false::"+hide+" point::"+point+" polyArray[j]::"+polygon);
  }//j
}//function

polygonArray[j]是一个顶点。具有单个顶点的多边形极不可能包含任何点。

检查点是否在多边形

2 个答案: