Get property from geojson inside polygon using google maps js

问题

How can I access property of geojson data inside drawn polygon?I have this example:

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/

Each feature contains property like letter, color etc. If I draw a polygon over one (or more) of this letters I want to get properties.

回答1:

One option is to process through the features in the Data Layer checking if any/all of their points are contained by the drawn Polygon using containsLocation. This example opens an InfoWindow on the center of the bounds of the polygon on the data layer.

proof of concept fiddle

code snippet:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing,geometry&callback=initMap">
</script>

来源：https://stackoverflow.com/questions/39589832/get-property-from-geojson-inside-polygon-using-google-maps-js