google-maps - 谷歌地图 API V3 : KML plus additional marker not zooming to fit both

Question

我有一个 kml 文件，可以在谷歌地图中正常加载。在同一页面上，我有一个文本框，用户可以在其中输入他们的位置，这将添加一个标记，这也适用。

我遇到的问题是，如果用户输入的位置超出了 kml 文件的范围， map 将不会缩放以包含 kml 和新标记。

如果我有 preserveViewport=false，它将缩放以适合 kml。如果为真，它将缩放以适合新标记。

$(document).ready(function () {
  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  var ctaLayer = new google.maps.KmlLayer('KMLLOCATION', { preserveViewport: false });
  ctaLayer.setMap(map);

  var marker = new google.maps.Marker({ position: new google.maps.LatLng(LAT, LONG), map: map, title: 'You are here', clickable: false, icon: '/media/youarehere.png' });

  var bounds = new google.maps.LatLngBounds();
  var ll = new google.maps.LatLng(LAT, LONG);
  bounds.extend(ll);
  map.fitBounds(bounds);
});

编辑

感谢 geocodezip 为我指明了正确的方向。这是我更新后的有效代码。

$(document).ready(function () {
  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  var layer = new google.maps.KmlLayer('KMLLOCATION', { map: map, preserveViewport: true });

  var marker = new google.maps.Marker({ position: new google.maps.LatLng(LAT, LONG), map: map, title: 'You are here', clickable: false, icon: '/media/youarehere.png' });

  google.maps.event.addListener(layer, 'defaultviewport_changed', function() {
    var bounds = layer.getDefaultViewport();
    var ll = new google.maps.LatLng(LAT, LONG);
    bounds.extend(ll);
    map.fitBounds(bounds);
  });
});

Answer 1

您需要获取 kml 的边界 ( getDefaultViewport() on the KmlLayer ), extend that with the additional marker然后使用“扩展”边界对象调用 fitBounds(将 preservViewport 设置为 true，这样 map 就不会缩放到 KmlLayer 的默认视口(viewport))。