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

时间:2016-12-12 22:44:30

标签: javascript google-maps google-maps-api-3

我正在尝试获取KML文件的中心latLng点并将其存储在变量中以进行地图设置,但我一直收到错误"未捕获的TypeError:无法读取属性' getCenter&#39 ;未定义的(...)"。 getDefautViewport未定义,我不知道为什么。到目前为止我的代码:

Runnable

1 个答案:

答案 0 :(得分:3)

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

在将KmlLayer添加到地图之前,您无法检索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);
  });

proof of concept fiddle

代码段

var map;

function initMap() {

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

  var layer1 = new google.maps.KmlLayer({
    url: 'http://googlemaps.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"></script>
<div id="map"></div>