我无法在 MultiLineString 中使用 feature.get Geometry ()

Question

我正在使用 google 地图 api v3 在地图上绘制 GeoJSON。有了层点，它就可以正常运行了。但我有一个 MultiLineString Camda 并将地图置于几何图形的中心会出现错误。多边形也会发生这种情况，但对于点效果很好。还有其他方法可以集中到 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

Answer 1

Data.MultiLineString类没有方法，get它有getAt和getArray方法。

getAt(n:数字)

返回值：Data.LineString

返回第 n 个包含的 Data.LineString。

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

getAt(n:数字)

返回值：LatLng

返回第 n 个包含的 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));
});  

概念证明小提琴

代码片段：

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));
});  

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;
}