Google Maps API containsLocationが正常に動作しない

Question

ユーザーがGoogleマップでポリゴンを描くことができるウェブサイトのプロパティ検索を作成しようとしていて、境界内の関連するプロパティが表示されます。

私は、データベースのlat/lng定義から作成されたマーカーのグループを持っています。ポリゴンが完成したら、マーカーをループし、containsLocationを使ってポリゴンと比較します。 containsLocationがfalseを返した場合は、マップからマーカーを削除します。

残念ながら、これは機能しません。ポリゴンの外側にある多くのプロパティはそのまま残っていますが、なぜ私はその理由が分かりません。私は私の下のJS、あなたはこの動作を確認することができますJSFiddleへのリンクを含めました：私はすぐに戻ってこれに私のコードを剥奪している

jQuery(function() { 
    map = new google.maps.Map(document.getElementById('search_map'), { 
    zoom: 10, 
    center: {lat: 53.1877837, lng: -2.890695400000027} 
    }); 

    var markers = []; 
    var properties = [ 
    {"lat":"53.19744","lng":"-2.90324"},{"lat":"53.20113","lng":"-2.88327"},{"lat":"53.19467","lng":"-2.89708"},{"lat":"53.19408","lng":"-2.90420"},{"lat":"53.19122","lng":"-2.86685"},{"lat":"53.19157","lng":"-2.87039"},{"lat":"53.19495","lng":"-2.90185"},{"lat":"53.19912","lng":"-2.90328"},{"lat":"53.19744","lng":"-2.89996"},{"lat":"53.19939","lng":"-2.90310"},{"lat":"53.19955","lng":"-2.90304"},{"lat":"53.18981","lng":"-2.89322"},{"lat":"53.19707","lng":"-2.89818"},{"lat":"53.19246","lng":"-2.86232"},{"lat":"53.19694","lng":"-2.89845"},{"lat":"53.19248","lng":"-2.87886"},{"lat":"53.19393","lng":"-2.90255"},{"lat":"53.19675","lng":"-2.89979"},{"lat":"53.19426","lng":"-2.90188"},{"lat":"53.28044","lng":"-2.89737"},{"lat":"53.27536","lng":"-2.93683"},{"lat":"53.16830","lng":"-3.08807"},{"lat":"53.17966","lng":"-2.90035"},{"lat":"53.27380","lng":"-2.89055"},{"lat":"53.20563","lng":"-2.92282"},{"lat":"53.20092","lng":"-2.89327"},{"lat":"53.19120","lng":"-2.86799"},{"lat":"53.18154","lng":"-2.88894"},{"lat":"53.19474","lng":"-2.88410"},{"lat":"53.19995","lng":"-2.89468"},{"lat":"53.19354","lng":"-2.88157"},{"lat":"53.21982","lng":"-2.88244"},{"lat":"53.20004","lng":"-2.89296"},{"lat":"53.19487","lng":"-2.87742"},{"lat":"53.19640","lng":"-2.88485"},{"lat":"53.22933","lng":"-2.95355"},{"lat":"53.21318","lng":"-2.87070"},{"lat":"53.20609","lng":"-2.92817"},{"lat":"53.19710","lng":"-2.87817"},{"lat":"53.18776","lng":"-2.89100"},{"lat":"53.19487","lng":"-2.87742"},{"lat":"53.17526","lng":"-2.91006"},{"lat":"53.19338","lng":"-2.88320"},{"lat":"53.18978","lng":"-2.86599"},{"lat":"53.19143","lng":"-2.88282"},{"lat":"53.19479","lng":"-2.88436"} 
    ]; 

    for (var i = 0; i < properties.length; i++) { 
    var markerPosition = new google.maps.LatLng(parseFloat(properties[i].lat), parseFloat(properties[i].lng)); 
    var marker = new google.maps.Marker({ 
     position: markerPosition, 
     map: map 
    }); 

    // Add it to the array 
    markers.push(marker); 
    } 

    var drawingManager = new google.maps.drawing.DrawingManager({ 
    drawingMode: google.maps.drawing.OverlayType.POLYGON, 
    drawingControl: false, 
    drawingControlOptions: { 
     drawingModes: ['polygon'] 
    } 
    }); 
    drawingManager.setMap(map); 

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) { 
    for (var i = 0; i < markers.length; i++) { 
     if (!google.maps.geometry.poly.containsLocation(markers[i].position, polygon.overlay)) { 
     markers[i].setMap(null); 
     markers.splice(i, 1); 
     } 
    } 
    jQuery('#result').text(markers.length + ' properties found'); 
    }); 
}); 

https://jsfiddle.net/mwttowd8/21/

をし、それはまだ戻っていません正しいマーカー。私はLatLngオブジェクトの代わりにlat/lngオブジェクトを使用しようとしましたが、まだ運がありません - 他に何を試していいのか分かりません！

Answer 1

私は次のようにリスナーを編集した：

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) { 
var locationsFound = 0; 
for (var i = 0; i < markers.length; i++) { 
    if (!google.maps.geometry.poly.containsLocation(markers[i].position, polygon.overlay)) { 
    markers[i].setMap(null); 
    markers.splice(i, 0); 
    } else if (google.maps.geometry.poly.containsLocation(markers[i].position, polygon.overlay)){ 
     locationsFound ++; 
    } 
} 
$('#result').text(locationsFound + ' properties found'); 
}); 

それは残念なプロパティの数を取得するハックのビットです。マーカーを使用して何かをする必要がある場合（つまり、場所を取得する）、どのように進むかわかりません。

何らかの理由で、配列のスプライスは動作しません。

markers.splice(i, 1);と私はそれを変更する場合：マーカーを格納し、わずかによりよい解決策：markers.splice(i, 0);またはそれを完全に削除マーカーすべてが正しく

編集を消滅ポリゴンに存在するものはlocArray

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) { 
var locArray=[]; 
for (var i = 0; i < markers.length; i++) { 
    if (!google.maps.geometry.poly.containsLocation(markers[i].position, polygon.overlay)) { 
     markers[i].setMap(null); 

    } else if (google.maps.geometry.poly.containsLocation(markers[i].position, polygon.overlay)){ 
     locArray.push(markers[i]); 
    } 
} 
$('#result').text(locArray.length + ' properties found'); 
});