如何使用 Google Maps API 获取 KML 的中心点

Question

我正在尝试获取 KML 文件的中心 latLng 点并将其存储在地图设置的变量中，但我不断收到错误“未捕获的类型错误：无法读取 undefined(...) 的属性 'getCenter'”。getDefautViewport 返回未定义，我不知道为什么。到目前为止我的代码：

    var map;
    function initMap() {

      map = new google.maps.Map(document.getElementById('map'), {
        center: getCenter,
        zoom: 10
        }
      });

      var layer1 = new google.maps.KmlLayer({
        url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
        preserveViewport: true,
        map: map
      });

      var getCenter = layer1.getDefaultViewport().getCenter();

    } 

Answer 1

如果您希望地图以 KML 为中心，请设置preserveViewport: false，则无需设置中心。

在将 KmlLayer 添加到地图之前，您无法检索它的默认视口，并且在创建地图之前您无法将其添加到地图。创建地图时不要设置地图的 center 属性：

map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10
});

等待 KmlLayer 的 defaultviewport 可用，然后设置地图中心：

google.maps.event.addListener(layer1, 'defaultviewport_changed', function() {
    var getCenter = layer1.getDefaultViewport().getCenter();
    map.setCenter(getCenter);
  });

概念证明小提琴

代码片段：

map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10
});

google.maps.event.addListener(layer1, 'defaultviewport_changed', function() {
    var getCenter = layer1.getDefaultViewport().getCenter();
    map.setCenter(getCenter);
  });

var map;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10
  });

  var layer1 = new google.maps.KmlLayer({
    url: 'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml',
    preserveViewport: true,
    map: map
  });
  google.maps.event.addListener(layer1, 'defaultviewport_changed', function() {
    var getCenter = layer1.getDefaultViewport().getCenter();
    map.setCenter(getCenter);
    console.log(getCenter.toUrlValue(6));
  });

}
google.maps.event.addDomListener(window, "load", initMap);