在 google 地图中,当放置标记时,检测数据层标记中的哪个多边形

in google maps, when drop a marker, detect which polygon in data layer marker is

我有一个带有 geojson 多边形数据层的 google 地图。当用户输入地址时,程序会在地图上放置一个标记并放大。然后我想检测标记所在的多边形。有人知道怎么做吗?

这是我的代码:

//the map
map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

    map.data.loadGeoJson('js/County_Voting_District_Boundaries.json');
        map.data.setStyle(function (feature) {
        return {
            strokeWeight: 1,
            fillColor: 'white',
            fillOpacity: 0
        };
    });

geocoder = new google.maps.Geocoder();

  $(function() {
    $("#address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {
        $("#latitude").val(ui.item.latitude);
        $("#longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        var marker = new google.maps.Marker({
                      position: location,
                      map: map,
                      icon: {
                        path: fontawesome.markers.MAP_MARKER,
                        scale: 0.5,
                        strokeWeight: 0.2,
                        strokeColor: 'black',
                        strokeOpacity: 1,
                        fillColor: '#000000',
                        fillOpacity: 0.7
                      }
                    });
        //marker.setPosition(location);
        //map.setCenter(location);
        map.setZoom(16);
        map.setCenter(location);

        //how to detect which polygon from the geojson this marker is in??
      }
    });
  });
  1. 使用map.data.forEach处理GeoJson中的每个多边形
  2. 使用 containsLocation 确定自动完成返回的位置是否在多边形内(需要根据 GeoJson 数据创建 google.maps.Polygon)。
// check all the Polygons in the GeoJson
// detect which polygon from the geojson the marker is in
map.data.forEach(function(feature) {
  if (feature.getGeometry().getType() == "Polygon") {
    // simplifying assumption, depends on data
    // just check first linear ring
    var poly = new google.maps.Polygon({
      path: feature.getGeometry().getAt(0).getArray()
    });
    if (google.maps.geometry.poly.containsLocation(marker.getPosition(),poly)) {
      // if inside polygon, create an infowindow with some information from the GeoJson
      infowindow.setContent(feature.getProperty("Muni_War_1"));
      infowindow.setPosition(marker.getPosition());
      infowindow.open(map);
    }
  }
}) 

proof of concept fiddle

代码片段:

var map;
var marker;

function initMap() {
  var infowindow = new google.maps.InfoWindow();
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 40.460625,
      lng: -79.99588680
    },
    mapTypeId: 'terrain'
  });
  map.data.addGeoJson(geoJson);
  map.data.setStyle(function(feature) {
    var color = 'white';
    var opacity = 0;
    if (feature.getProperty("Muni_War_1") && !feature.getProperty("Muni_War_1").includes("PITTSBURGH")) {
      color = "red";
      opacity = 1.0;
    }
    return {
      strokeWeight: 1,
      fillColor: color,
      fillOpacity: opacity
    };
  });
  map.data.addListener("click", function(evt) {
    infowindow.setContent(evt.feature.getProperty("Muni_War_1"));
    infowindow.setPosition(evt.latLng);
    infowindow.open(map);
  });
  geocoder = new google.maps.Geocoder();

  $(function() {
    $("#address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {
        geocoder.geocode({
          'address': request.term
        }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label: item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {
        $("#latitude").val(ui.item.latitude);
        $("#longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        if (marker && marker.setMap)
          marker.setMap(null);
        marker = new google.maps.Marker({
          position: location,
          map: map,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 10,
            strokeWeight: 1,
            strokeColor: 'black',
            strokeOpacity: 1,
            fillColor: '#000000',
            fillOpacity: 0.7
          }
        });
        map.setZoom(16);
        map.setCenter(location);

        // detect which polygon from the geojson the marker is in
        map.data.forEach(function(feature) {
          if (feature.getGeometry().getType() == "Polygon") {
            // simplifying assumption, depends on data
            // just check first linear ring
            var poly = new google.maps.Polygon({
              path: feature.getGeometry().getAt(0).getArray()
            });
            if (google.maps.geometry.poly.containsLocation(marker.getPosition(), poly)) {
              infowindow.setContent(feature.getProperty("Muni_War_1"));
              infowindow.setPosition(marker.getPosition());
              infowindow.open(map);
            }
          }
        })
      }
    });
  });
}
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "FID": 534,
        "OBJECTID_1": 536,
        "DISTRICT_1": 3,
        "WARD_1": 22,
        "MUNICODE_1": 188,
        "YRAPPROV_1": 1988,
        "MWD_NOPA_1": "188223",
        "OPA_MUNI_1": 100,
        "MWD_PAD_1": "18802203",
        "Pseud4_12": "0896",
        "PseudoNu_5": 896,
        "Muni_War_1": "PITTSBURGH WARD 22 DIST 3",
        "Shape__Area": 0.000127907996175361,
        "Shape__Length": 0.0659785575690809
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-80.002624142443, 40.4562269871821],
            [-80.0035933144929, 40.4560376379833],
            [-80.0066356724928, 40.4554573338665],
            [-80.0061439762253, 40.4539491442557],
            [-80.006521290141, 40.4538650640496],
            [-80.0078864228193, 40.4535994266993],
            [-80.0079718876039, 40.4535619750354],
            [-80.0080189061968, 40.4535168655953],
            [-80.0080441411696, 40.4534654016898],
            [-80.0080477408706, 40.453411872229],
            [-80.0078777892795, 40.4528851504848],
            [-80.0078134887376, 40.4527092097528],
            [-80.0077422228331, 40.4524728262537],
            [-80.0070017712699, 40.4501769634053],
            [-80.0068993686211, 40.4500172154508],
            [-80.0067984420914, 40.4499818582879],
            [-80.0065246990104, 40.450022363761],
            [-80.0057160940111, 40.4501701445634],
            [-80.0053895657614, 40.450240615606],
            [-80.0049011344983, 40.4503199102387],
            [-80.0046032157691, 40.4493656933574],
            [-80.004458806661, 40.4489288224128],
            [-80.0039687545438, 40.4473459384101],
            [-80.0037843594471, 40.4468158018024],
            [-80.0033497958882, 40.4456473920009],
            [-80.0111254587476, 40.4439551120629],
            [-80.0161811284205, 40.4429301523937],
            [-80.0168543944643, 40.4448664660582],
            [-80.0170196223317, 40.4454675837854],
            [-80.0170759557854, 40.4456064355076],
            [-80.0172012065068, 40.4460047915118],
            [-80.0176245752175, 40.4472923776009],
            [-80.0177181480932, 40.4475899304204],
            [-80.0178906046362, 40.4482961886296],
            [-80.0180723505458, 40.4488909727124],
            [-80.0181603279676, 40.4492090571121],
            [-80.0182720414924, 40.4494849727946],
            [-80.0183156546515, 40.4496862831949],
            [-80.0161040571157, 40.4500958996217],
            [-80.0149575863167, 40.4503140223605],
            [-80.0135553686271, 40.4505697438266],
            [-80.0134167970447, 40.4506042948628],
            [-80.0137925664527, 40.4517066219642],
            [-80.0139867884907, 40.4523260459801],
            [-80.0141049912449, 40.4526214882309],
            [-80.0143463628347, 40.4533313617738],
            [-80.0144931746596, 40.453734538167],
            [-80.0145712172817, 40.4539742922987],
            [-80.011071359437, 40.4546315446581],
            [-80.0105642290626, 40.4547320334041],
            [-80.009596943892, 40.4549088196457],
            [-80.0103398680634, 40.4571839233437],
            [-80.010293773502, 40.4571841076306],
            [-80.0094202008413, 40.4573475647093],
            [-80.0093560441867, 40.4573507836048],
            [-80.0092585654641, 40.4573315813452],
            [-80.0084692062732, 40.4574830348794],
            [-80.0073583813477, 40.4576830919662],
            [-80.0072298534003, 40.4572871691404],
            [-80.0058969431478, 40.4575441206315],
            [-80.0051273889795, 40.457686598159],
            [-80.0030742341891, 40.4579671401622],
            [-80.0028164265098, 40.4580095407637],
            [-80.0021263604561, 40.4581405724994],
            [-80.0017771673076, 40.4570086064529],
            [-80.0016720953322, 40.4566878408134],
            [-80.0015701762567, 40.4564210735549],
            [-80.0017638869273, 40.4563948041385],
            [-80.002624142443, 40.4562269871821]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "FID": 538,
        "OBJECTID_1": 540,
        "DISTRICT_1": 2,
        "WARD_1": 22,
        "MUNICODE_1": 188,
        "YRAPPROV_1": 1988,
        "MWD_NOPA_1": "188222",
        "OPA_MUNI_1": 100,
        "MWD_PAD_1": "18802202",
        "Pseud4_12": "0895",
        "PseudoNu_5": 895,
        "Muni_War_1": "PITTSBURGH WARD 22 DIST 2",
        "Shape__Area": 0.00000975293543784534,
        "Shape__Length": 0.0129843994459336
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-80.0103398680634, 40.4571839233437],
            [-80.009596943892, 40.4549088196457],
            [-80.0105642290626, 40.4547320334041],
            [-80.011071359437, 40.4546315446581],
            [-80.0136238773815, 40.4541519660055],
            [-80.0143672533958, 40.4564287314273],
            [-80.0131512751921, 40.456661878932],
            [-80.0127197958987, 40.456738702397],
            [-80.0118625154955, 40.4569101410276],
            [-80.0111114410092, 40.4570542133402],
            [-80.0103912666814, 40.4571837154917],
            [-80.0103398680634, 40.4571839233437]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "FID": 546,
        "OBJECTID_1": 548,
        "DISTRICT_1": 1,
        "WARD_1": 22,
        "MUNICODE_1": 188,
        "YRAPPROV_1": 1988,
        "MWD_NOPA_1": "188221",
        "OPA_MUNI_1": 100,
        "MWD_PAD_1": "18802201",
        "Pseud4_12": "0894",
        "PseudoNu_5": 894,
        "Muni_War_1": "PITTSBURGH WARD 22 DIST 1",
        "Shape__Area": 0.0000308147124844859,
        "Shape__Length": 0.0237471195909311
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-80.0136238773815, 40.4541519660055],
            [-80.0145712172817, 40.4539742922987],
            [-80.0144931746596, 40.453734538167],
            [-80.0143463628347, 40.4533313617738],
            [-80.0141049912449, 40.4526214882309],
            [-80.0139867884907, 40.4523260459801],
            [-80.0137925664527, 40.4517066219642],
            [-80.0134167970447, 40.4506042948628],
            [-80.0135553686271, 40.4505697438266],
            [-80.0149575863167, 40.4503140223605],
            [-80.0161040571157, 40.4500958996217],
            [-80.0183156546515, 40.4496862831949],
            [-80.0183375045392, 40.449788310935],
            [-80.0188269221208, 40.4513016487001],
            [-80.0192610287381, 40.4525859262571],
            [-80.019295801723, 40.4526713130121],
            [-80.019312422322, 40.4527513887118],
            [-80.0197099253879, 40.4539542416605],
            [-80.0201121401067, 40.455208252871],
            [-80.0199584583864, 40.4552434407956],
            [-80.017230563838, 40.4557520809715],
            [-80.0165146233212, 40.4558914187249],
            [-80.0153513333278, 40.4561038966026],
            [-80.0153941495936, 40.4562416941261],
            [-80.0143672533958, 40.4564287314273],
            [-80.0136238773815, 40.4541519660055]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "FID": 549,
        "OBJECTID_1": 551,
        "DISTRICT_1": 4,
        "WARD_1": 22,
        "MUNICODE_1": 188,
        "YRAPPROV_1": 1988,
        "MWD_NOPA_1": "188224",
        "OPA_MUNI_1": 100,
        "MWD_PAD_1": "18802204",
        "Pseud4_12": "0897",
        "PseudoNu_5": 897,
        "Muni_War_1": "PITTSBURGH WARD 22 DIST 4",
        "Shape__Area": 0.0000465136084411206,
        "Shape__Length": 0.0323893563598957
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-80.0014944365421, 40.4526986168497],
            [-80.0014091677905, 40.4524189965217],
            [-80.0012336091026, 40.4518976093079],
            [-80.0009098002375, 40.4508651992806],
            [-80.0013437957882, 40.4507835515281],
            [-80.0010934503246, 40.4500271310999],
            [-80.001015420744, 40.4497622997161],
            [-80.0009839860463, 40.4496819950096],
            [-80.0008054094602, 40.4491507111661],
            [-80.000630566666, 40.4485830579235],
            [-80.0005581282399, 40.4483645405515],
            [-80.0005059029672, 40.4482266329735],
            [-80.0004229866335, 40.4480171580788],
            [-80.0002963426545, 40.4477494125711],
            [-79.999799554087, 40.4467494748103],
            [-79.9999359684549, 40.4466978437281],
            [-80.0012484034912, 40.4462503682297],
            [-80.0014345837005, 40.4461810509678],
            [-80.0015108883732, 40.4461608702575],
            [-80.0024295812902, 40.445847626678],
            [-80.0033497958882, 40.4456473920009],
            [-80.0037843594471, 40.4468158018024],
            [-80.0039687545438, 40.4473459384101],
            [-80.004458806661, 40.4489288224128],
            [-80.0046032157691, 40.4493656933574],
            [-80.0049011344983, 40.4503199102387],
            [-80.0053895657614, 40.450240615606],
            [-80.0057160940111, 40.4501701445634],
            [-80.0065246990104, 40.450022363761],
            [-80.0067984420914, 40.4499818582879],
            [-80.0068993686211, 40.4500172154508],
            [-80.0070017712699, 40.4501769634053],
            [-80.0077422228331, 40.4524728262537],
            [-80.0078134887376, 40.4527092097528],
            [-80.0078777892795, 40.4528851504848],
            [-80.0080477408706, 40.453411872229],
            [-80.0080441411696, 40.4534654016898],
            [-80.0080189061968, 40.4535168655953],
            [-80.0079718876039, 40.4535619750354],
            [-80.0078864228193, 40.4535994266993],
            [-80.006521290141, 40.4538650640496],
            [-80.0061439762253, 40.4539491442557],
            [-80.0066356724928, 40.4554573338665],
            [-80.0035933144929, 40.4560376379833],
            [-80.002624142443, 40.4562269871821],
            [-80.0015483708459, 40.4528550190591],
            [-80.0014944365421, 40.4526986168497]
          ]
        ]
      }
    },

  ]
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input id="address" value="Galveston Ave, Pittsburgh, PA" />
<table border="1">
  <tr>
    <td>Galveston Ave, Pittsburgh, PA</td>
    <td>Mimosa Way, Pittsburgh, PA</td>
    <td>Brim Way, Pittsburgh, PA</td>
  </tr>
</table>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap">
</script>