2016-08-18 89 views
-1

我試圖用這個裏面: JS- Check if Point Inside A Polygon檢查點是否多邊形

,以確定一個點是否在谷歌地圖上的用戶繪製多邊形(這是嵌入內Salesforce Visualforce頁面)。但是,即使點清楚地位於我繪製的多邊形內,它總是返回錯誤。

當我用註釋掉的硬編碼多邊形座標測試它時,它可以正常工作。

任何想法我做錯了什麼?

這裏是我的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> 
+0

也許使用[google.maps.geometry庫'.contains'方法](https://developers.google.com/maps/documentation/javascript/reference#poly)? – geocodezip

+0

[是多邊形內的LatLng]的可能重複(http://stackoverflow.com/questions/15097464/is-latlng-inside-a-polygon) – geocodezip

回答

0

您可以使用包含了幾何庫的方法來檢查,如果該點位於多邊形內:

// 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> 
0

您正在使用函數不正確。

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]是單個頂點。具有單個頂點的多邊形極不可能包含任何點。