我不能在 MultiLineString 中使用 feature.get Geometry ()

I can not use feature.get Geometry () in a MultiLineString

我正在使用 google 地图 api v3 在我的地图上绘制 GeoJSON。有了图层点,它就正常运行了。但是我有一个 MultiLineString Camda,并且将地图居中放置在几何图形上,因此 error.This 也出现在多边形中,但这些点效果很好。有没有其他方法可以集中到 MultiLineString 和 Polygons?

  google.maps.event.addListener(cicloviasLayer, 'addfeature', function (e) {
     console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
     map.setCenter(e.feature.getGeometry().get());

  });  

错误:

e.feature.getGeometry(...).get is not a function

Data.MultiLineString class 没有 get 方法,它有 getAtgetArray 方法。

getAt(n:number)

Return Value: Data.LineString

Returns the n-th contained Data.LineString.

返回的 LineString 有一个 getAt 方法 returns 一个 google.maps.LatLng 对象

getAt(n:number)

Return Value: LatLng

Returns the n-th contained LatLng.

google.maps.event.addListener(cicloviasLayer, 'addfeature', function (e) {
  console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
  // will center the map on the first vertex of the first LineString
  map.setCenter(e.feature.getGeometry().getAt(0).getAt(0));
});  

proof of concept fiddle

代码片段:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 15,
    center: {
      lat: -28,
      lng: 137
    },
  });
  map.data.setStyle({
    strokeColor: "blue",
    strokeWeight: 4,
  });
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
    // will center the map on the first vertex of the first LineString
    map.setCenter(e.feature.getGeometry().getAt(0).getAt(0));
    var marker = new google.maps.Marker({
      position: e.feature.getGeometry().getAt(0).getAt(0),
      map: map,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      }
    })
  });
  map.data.addGeoJson({
    "type": "Feature",
    geometry: {
      "type": "MultiLineString",
      "coordinates": [
        [
          [-105.021443,
            39.578057
          ],
          [-105.021507,
            39.577809
          ],
          [-105.021572,
            39.577495
          ],
          [-105.021572,
            39.577164
          ],
          [-105.021572,
            39.577032
          ],
          [-105.021529,
            39.576784
          ]
        ],
        [
          [-105.019898,
            39.574997
          ],
          [-105.019598,
            39.574898
          ],
          [-105.019061,
            39.574782
          ]
        ],
        [
          [-105.017173,
            39.574402
          ],
          [-105.01698,
            39.574385
          ],
          [-105.016636,
            39.574385
          ],
          [-105.016508,
            39.574402
          ],
          [-105.01595,
            39.57427
          ]
        ],
        [
          [-105.014276,
            39.573972
          ],
          [-105.014126,
            39.574038
          ],
          [-105.013825,
            39.57417
          ],
          [-105.01331,
            39.574452
          ]
        ]
      ]
    }
  });
}
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>Data Layer: Simple</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>