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

Question

我正在尝试获取kml文件的中心latlng点并将其存储在映射设置的变量中，但是我一直遇到错误" typeError：" typeerror：无法读取属性'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的默认视口，直到将其添加到地图为止，并且在创建地图之前，您无法将其添加到地图中。创建地图时不要设置地图的中心属性：

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

概念证明小提琴

代码段：

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

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>