Получить свойство с GeoJSON внутри многоугольника с помощью Google Maps JS

Question

Как я могу получить доступ к собственности GeoJSON данных внутри нарисованного многоугольника У меня есть такой пример:

var map; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: -28, lng: 137} 
    }); 

    // Load GeoJSON. 
    map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json'); 

    // Set the stroke width, and fill color for each polygon 
    map.data.setStyle({ 
    fillColor: 'green', 
    strokeWeight: 1 
    }); 


    var drawingManager = new google.maps.drawing.DrawingManager({ 
    drawingControl: true, 
    drawingControlOptions: { 
     position: google.maps.ControlPosition.TOP_CENTER, 
     drawingModes: ['polygon'] 
    } 
    }); 
    drawingManager.setMap(map); 

    google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) { 
    var coordinates = (polygon.getPath().getArray()); 

    // Get all features from polygon and geojson common part 

    } 
); 
} 

https://jsfiddle.net/j0f7ggeg/2/

Каждая функция содержит свойство, как буквы, цвета и т. д. Если я рисую многоугольник над одной (или более) из этих букв, я хочу получить свойства.

Answer 1

Один из вариантов заключается в обработке через функции в Data Layer, если какая-либо/все их точки содержатся нарисованным многоугольником, используя containsLocation. В этом примере открывается InfoWindow в центре границ многоугольника на слое данных.

proof of concept fiddle

фрагмент кода:

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: { 
 
     lat: -28, 
 
     lng: 137 
 
    } 
 
    }); 
 

 
    // Load GeoJSON. 
 
    map.data.loadGeoJson(
 
    'https://storage.googleapis.com/mapsdevsite/json/google.json'); 
 

 
    // Set the stroke width, and fill color for each polygon 
 
    map.data.setStyle({ 
 
    fillColor: 'green', 
 
    strokeWeight: 1 
 
    }); 
 

 

 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingControl: true, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_CENTER, 
 
     drawingModes: ['polygon'] 
 
    } 
 
    }); 
 
    drawingManager.setMap(map); 
 

 
    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { 
 
    var coordinates = (polygon.getPath().getArray()); 
 
    map.data.forEach(function(feature) { 
 
     var id = feature.getId(); 
 
     var color = feature.getProperty("color"); 
 
     var letter = feature.getProperty("letter"); 
 
     var geometry = feature.getGeometry(); 
 
     var type = geometry.getType(); 
 
     if (geometry.getType() == "Polygon") { 
 
     var path = geometry.getArray()[0]; 
 
     var completelyContained = 0; 
 
     var partiallyContained = false; 
 
     var contained = false; 
 
     var content = ""; 
 
     var bounds = new google.maps.LatLngBounds(); 
 
     for (var i = 0; i < path.getLength(); i++) { 
 
      bounds.extend(path.getAt(i)); 
 
      if (google.maps.geometry.poly.containsLocation(path.getAt(i), polygon)) { 
 
      completelyContained++; 
 
      partiallyContained = true; 
 
      } 
 
     } 
 
     var infowindow = new google.maps.InfoWindow(); 
 

 
     if (completelyContained == path.getLength()) { 
 
      contained = true; 
 
      content = "completly contained<br>"; 
 
     } 
 
     if (partiallyContained == true) 
 
      content += "partially contained<br>"; 
 
     if (contained || partiallyContained) { 
 
      content += "letter: " + letter + "<br>"; 
 
      content += "color: " + color; 
 
      infowindow.setContent(content); 
 
      infowindow.setPosition(bounds.getCenter()); 
 
      infowindow.open(map); 
 
     } 
 
     } 
 
     // alert() with property name 
 
    }); 
 
    }); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=drawing,geometry&callback=initMap"> 
 
</script>