javascript - 使用Google Maps JS从面内的geojson获取属性(Get property from geojson inside polygon using google maps js)

Question

How can I access property of geojson data inside drawn polygon?I have this example:(我如何访问绘制多边形内的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/(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.(每个要素都包含字母，颜色等属性。如果我在一个（或多个）字母上绘制多边形，则希望获得属性。)

  ask by miru87 translate from so

Answer 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 .(一种选择是处理数据层中的要素，并使用containsLocation检查所绘制的多边形是否包含其所有/所有点。)

This example opens an InfoWindow on the center of the bounds of the polygon on the data layer.(本示例在数据层上多边形边界的中心打开一个InfoWindow。)

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>