Google maps 加载后触发单击单个geoJSON多边形_Google Maps_Google Maps Api 3

Google maps 加载后触发单击单个geoJSON多边形

google-maps google-maps-api-3

Google maps 加载后触发单击单个geoJSON多边形,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,客户端使用Google Maps APIv3loadGeoJson（）方法将一些多边形加载到地图上。我希望能够搜索这些多边形，当其中一个多边形与提交的字符串匹配时，对其进行缩放/居中，并触发单击事件，打开该多边形的信息窗口，以引用geoJSON功能，然后使用该引用在地图上选择多边形。显示为未定义的，，不确定它是否有帮助；通过getProperty（）的工作，几乎没有其他方法真正起作用（getGeometry（）被破坏）。这让我觉得可能我在迭代错误的数组，尤其是第85-100行： // Try

客户端使用Google Maps APIv3

loadGeoJson（）

方法将一些多边形加载到地图上。我希望能够搜索这些多边形，当其中一个多边形与提交的字符串匹配时，对其进行缩放/居中，并触发

单击

事件，打开该多边形的信息窗口

，以引用geoJSON功能，然后使用该引用在地图上选择多边形。显示为未定义的

，

，不确定它是否有帮助；通过

getProperty（）

的工作，几乎没有其他方法真正起作用（

getGeometry（）

被破坏）。这让我觉得可能我在迭代错误的数组

，尤其是第85-100行：

// Trying to search in the layer and trigger an event
geoJsonLayer.forEach(function(feature) {
  if(searchString===feature.getProperty('letter')) {
    // Match found, Zoom to this feature and pop its infobox
    var foundFeatureId = feature.getId(); // Is undefined
    // var foundFeatureId = feature.id; // Is undefined
    // var foundFeatureGeo = feature.getGeometry().get(); // Not a function
    console.log(foundFeatureId);
    google.maps.event.trigger(map,'click',feature); // seems to do nothing
  }
});

在搜索一个字符（“g”、“o”、“l”，例如）时，搜索会找到一个匹配项，然后尝试触发该geoJSON多边形的单击事件（最终打开infowindow）

这就是让我难堪的部分。我尝试过定义ID，但使用

getId（）

无法定义它。在遍历数据层时，似乎也不能直接触发它。在尝试查看

地图时，似乎找不到它。数据也找不到
如何仅使用geoJSON层正确触发此事件？
触发单击事件以映射。数据如下所示。
（在下面的代码中，我添加了一个多边形而不是加载geojson文件，以便测试没有文件的任何人）
更新：搜索功能，使用map.data.forEach（）
方法。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
    #map_canvas {
      width: 600px;
      height: 400px;
      border: 1px solid gray;
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>

      function initMap() {


        var div = document.getElementById("map_canvas");
        var map = new google.maps.Map(div, {
          center: {lat: 41.79763176991999, lng: 140.75910257175565},
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //map.data.loadGeoJson("polygons.json");

        //----------------------------------------------
        // Start - Adding a feature (instead of loadGeoJson for test)
        //----------------------------------------------

        // polygon paths
        var exteriorBoundary = new google.maps.Data.LinearRing([
          {lat: 41.79567213554726, lng: 140.75482176616788},
          {lat: 41.795888098191426, lng: 140.75384544208646},
          {lat: 41.79604007146779, lng: 140.75370596721768},
          {lat: 41.79621604007439, lng: 140.75369523838162},
          {lat: 41.79739981632479, lng: 140.7546071894467},
          {lat: 41.79878352706213, lng: 140.75461791828275},
          {lat: 41.79895148991592, lng: 140.75470374897122},
          {lat: 41.79899947922187, lng: 140.7548968680203},
          {lat: 41.798743535841595, lng: 140.75671004131436},
          {lat: 41.79915944331544, lng: 140.7585554011166},
          {lat: 41.79914344692405, lng: 140.7587699778378},
          {lat: 41.79895948813609, lng: 140.75889872387052},
          {lat: 41.79763176991999, lng: 140.75910257175565},
          {lat: 41.796487990607034, lng: 140.7601754553616},
          {lat: 41.79630402419653, lng: 140.76018618419766},
          {lat: 41.79618404581822, lng: 140.76005743816495},
          {lat: 41.79561614511331, lng: 140.75835155323148},
          {lat: 41.79444033470146, lng: 140.7573108561337},
          {lat: 41.794408339558885, lng: 140.75716065242887},
          {lat: 41.79443233591732, lng: 140.75695680454373},
          {lat: 41.795024243248456, lng: 140.75621651485562},
          {lat: 41.79467229900768, lng: 140.7550578005612},
          {lat: 41.794736289013386, lng: 140.7548968680203},
          {lat: 41.79567213554726, lng: 140.75482176616788}
        ]);

        var polygon = new google.maps.Data.Polygon([exteriorBoundary]);

        var feature = new google.maps.Data.Feature({
          geometry: polygon,
          properties: {
            name: "Goryo-kaku, Hokkaido, Japan"
          },
          id: "goryokaku"
        });

        // Add a feature to the data layer.
        var layer = new google.maps.Data({
          map: map
        });
        layer.add(feature);

        // Fill all polygon as red
        layer.setStyle({
          scale: 6,
          strokeColor: "white",
          strokeOpacity: 1,
          strokeWeight: 1,
          fillColor: "red",
          fillOpacity: 0.5
        });

        //----------------------------------------------
        // End - adding a feature
        //----------------------------------------------

        // Catch the click event
        layer.addListener('click', function(data_mouseEvent) {
          var feature = data_mouseEvent.feature;
          feature.toGeoJson(function(geojson){
            var infoWnd = new google.maps.InfoWindow({
              content: JSON.stringify(geojson.properties, null, 2),
              position: feature.getGeometry().getAt(0).getAt(0)
            });
            infoWnd.open(map);
          });
        });

        layer.forEach(function(feature) {
          if (feature.getProperty('name') === "Goryo-kaku, Hokkaido, Japan" ) {
            google.maps.event.trigger(layer, 'click', {
              feature: feature
            });
          }
        });
      }
      google.maps.event.addDomListener(window, "load", initMap);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

update2：自定义图层的情况。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
    #map_canvas {
      width: 600px;
      height: 400px;
      border: 1px solid gray;
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>

      function initMap() {


        var div = document.getElementById("map_canvas");
        var map = new google.maps.Map(div, {
          center: {lat: 41.79763176991999, lng: 140.75910257175565},
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //map.data.loadGeoJson("polygons.json");

        //----------------------------------------------
        // Start - Adding a feature (instead of loadGeoJson for test)
        //----------------------------------------------

        // polygon paths
        var exteriorBoundary = new google.maps.Data.LinearRing([
          {lat: 41.79567213554726, lng: 140.75482176616788},
          {lat: 41.795888098191426, lng: 140.75384544208646},
          {lat: 41.79604007146779, lng: 140.75370596721768},
          {lat: 41.79621604007439, lng: 140.75369523838162},
          {lat: 41.79739981632479, lng: 140.7546071894467},
          {lat: 41.79878352706213, lng: 140.75461791828275},
          {lat: 41.79895148991592, lng: 140.75470374897122},
          {lat: 41.79899947922187, lng: 140.7548968680203},
          {lat: 41.798743535841595, lng: 140.75671004131436},
          {lat: 41.79915944331544, lng: 140.7585554011166},
          {lat: 41.79914344692405, lng: 140.7587699778378},
          {lat: 41.79895948813609, lng: 140.75889872387052},
          {lat: 41.79763176991999, lng: 140.75910257175565},
          {lat: 41.796487990607034, lng: 140.7601754553616},
          {lat: 41.79630402419653, lng: 140.76018618419766},
          {lat: 41.79618404581822, lng: 140.76005743816495},
          {lat: 41.79561614511331, lng: 140.75835155323148},
          {lat: 41.79444033470146, lng: 140.7573108561337},
          {lat: 41.794408339558885, lng: 140.75716065242887},
          {lat: 41.79443233591732, lng: 140.75695680454373},
          {lat: 41.795024243248456, lng: 140.75621651485562},
          {lat: 41.79467229900768, lng: 140.7550578005612},
          {lat: 41.794736289013386, lng: 140.7548968680203},
          {lat: 41.79567213554726, lng: 140.75482176616788}
        ]);

        var polygon = new google.maps.Data.Polygon([exteriorBoundary]);

        var feature = new google.maps.Data.Feature({
          geometry: polygon,
          properties: {
            name: "Goryo-kaku, Hokkaido, Japan"
          },
          id: "goryokaku"
        });

        // Add a feature to the data layer.
        var layer = new google.maps.Data({
          map: map
        });
        layer.add(feature);

        // Fill all polygon as red
        layer.setStyle({
          scale: 6,
          strokeColor: "white",
          strokeOpacity: 1,
          strokeWeight: 1,
          fillColor: "red",
          fillOpacity: 0.5
        });

        //----------------------------------------------
        // End - adding a feature
        //----------------------------------------------

        // Catch the click event
        layer.addListener('click', function(data_mouseEvent) {
          var feature = data_mouseEvent.feature;
          feature.toGeoJson(function(geojson){
            var infoWnd = new google.maps.InfoWindow({
              content: JSON.stringify(geojson.properties, null, 2),
              position: feature.getGeometry().getAt(0).getAt(0)
            });
            infoWnd.open(map);
          });
        });

        layer.forEach(function(feature) {
          if (feature.getProperty('name') === "Goryo-kaku, Hokkaido, Japan" ) {
            google.maps.event.trigger(layer, 'click', {
              feature: feature
            });
          }
        });
      }
      google.maps.event.addDomListener(window, "load", initMap);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>


#地图画布{
宽度：600px；
高度：400px；
边框：1px纯色灰色；
}
函数initMap（）{
var div=document.getElementById（“映射画布”）；
var map=new google.maps.map（div{
中心：{lat:41.797631769999，lng:140.75910257175565}，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//map.data.loadGeoJson（“polygons.json”）；
//----------------------------------------------
//开始-添加一个特性（而不是用于测试的loadGeoJson）
//----------------------------------------------
//多边形路径
var exteriorBoundary=new google.maps.Data.LinearRing([
{拉丁美洲：41.79567213554726，液化天然气：140.75482176616788}，
{拉丁美洲：41.795888098191426，液化天然气：140.75384544208646}，
{拉丁美洲：41.79604007146779，液化天然气：140.75370596721768}，
{拉丁美洲：41.79621604007439，液化天然气：140.75369523838162}，
{拉丁美洲：41.79739981632479，液化天然气：140.7546071894467}，
{拉丁美洲：41.79878352706213，液化天然气：140.75461791828275}，
{拉丁美洲：41.79895148991592，液化天然气：140.75470374897122}，
{拉丁美洲：41.79899947922187，液化天然气：140.7548968680203}，
{拉丁美洲：41.798743535841595，液化天然气：140.75671004131436}，
{拉丁美洲：41.79915944331544，液化天然气：140.7585554011166}，
{拉丁美洲：41.79914344692405，液化天然气：140.7587699778378}，
{拉丁美洲：41.79895948813609，液化天然气：140.75889872387052}，
{拉丁美洲：41.797631769999，液化天然气：140.75910257175565}，
{拉丁美洲：41.796487990607034，液化天然气：140.7601754553616}，
{拉丁美洲：41.79630042419653，液化天然气：140.76018618419766}，
{拉丁美洲：41.79618404581822，液化天然气：140.76005743816495}，
{拉丁美洲：41.79561614511331，液化天然气：140.75835155323148}，
{拉丁美洲：41.79444033470146，液化天然气：140.7573108561337}，
{拉丁美洲：41.794408339558885，液化天然气：140.75716065242887}，
{拉丁美洲：41.79443233591732，液化天然气：140.75695680454373}，
{拉丁美洲：41.7950244243248456，液化天然气：140.75621651485562}，
{拉丁美洲：41.79467229900768，液化天然气：140.7550578005612}，
{拉丁美洲：41.794736289013386，液化天然气：140.7548968680203}，
{拉丁美洲：41.79567213554726，液化天然气：140.75482176616788}
]);
var polygon=新的google.maps.Data.polygon（[exteriorBoundary]）；
var feature=new google.maps.Data.feature({
几何：多边形，
特性：{
名称：“日本北海道高丽阁”
},
id:“goryokaku”
});
//将要素添加到数据层。
var layer=new google.maps.Data({
地图：地图
});
图层。添加（特征）；
//将所有多边形填充为红色
layer.setStyle({
比例：6，
strokeColor：“白色”，
频闪不透明度：1，
冲程重量：1，
填充颜色：“红色”，
填充不透明度：0.5
});
//----------------------------------------------
//结束-添加功能
//----------------------------------------------
//捕获单击事件
layer.addListener（'click'，函数（data\u mouseEvent）{
var feature=数据\ mouseEvent.feature；
toGeoJson（函数（geojson）{
var infoWnd=new google.maps.InfoWindow({
内容：JSON.stringify（geojson.properties，null，2），
位置：feature.getGeometry（）.getAt（0）.getAt（0）
});
打开（地图）；
});
});
layer.forEach（功能（特性）{
if（feature.getProperty（'name'）==“日本北海道高丽阁”）{
google.maps.event.trigger（层，'click'{
特色：特色
});
}
});
}
google.maps.event.addDomListener（窗口“加载”，initMap）；

A没有get（）
方法，它有一个getArray（）
方法，该方法返回包含数据的数组。LinearRings。因此，对于“o”，它将有2个条目，对于“G”，它将只有一个条目
这将根据多边形的“字母”属性缩放贴图以适合多边形：
geoJsonLayer.forEach(function(feature) {
  if(searchString===feature.getProperty('letter')) {
    var foundFeatureGeo = feature.getGeometry().getAt(0).getArray(); // Also broken
    var bounds = new google.maps.LatLngBounds();
    for (var i=0; i<foundFeatureGeo.length; i++) {
      bounds.extend(foundFeatureGeo[i]);
    }
    map.fitBounds(bounds);
}


代码片段：

//正在加载内容
函数initMap（）{
map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：4，
中心：{
拉丁语：-28，
液化天然气：137
},
地图类型