Question

我注意到以下APIS的一些不同行为

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

http://jsfiddle.net/x8dSP/2062/

有时，多边形图层会在气球图层的顶部呈现，有时则相反。

似乎在地图被“缓存”之后？在浏览器中，它将使用多边形图层在顶部进行渲染。反正有没有阻止这个？或者让一个图层始终在后台？不幸的是，我无法将这些图层映射到一公里。

Answer 1

图层按照从服务器接收的顺序呈现（这不一定是它们在代码中出现的顺序）。您可以在设置第二个的map属性之前等待KmlLayer status_changed事件，强制一个加载另一个。

function initialize() {
  var chicago = new google.maps.LatLng(-122.365662,37.826988);
  var mapOptions = {
    zoom: 11,
    center: chicago
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'https://sites.google.com/site/gmaptest123/kml/nst.kml'
  });
  google.maps.event.addListener(ctaLayer, "status_changed", function() {
    ctaLayer2.setMap(map);
  });
  ctaLayer.setMap(map);

  var ctaLayer2 = new google.maps.KmlLayer({
    url: 'https://sites.google.com/site/gmaptest123/kml/HelloKml6.kml'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

updated fiddle

Answer 2

我的工作 here

将这两个参数添加到标记图层：

pane: "floatPane",
preserveViewport: true

所以它看起来像这样：

var ctaLayer2 = new google.maps.KmlLayer({
    url: 'https://sites.google.com/site/gmaptest123/kml/HelloKml6.kml',
    pane: "floatPane",
    preserveViewport: true
});

默认情况下，我认为是mapPane，其z-index低于floatPane。

Answer 3

this link中有一个有趣的方法。这是实际的订购代码：

// BEGIN SEQUENTIAL KML LOADING CODE
// This ensures the layers are drawn in order: cone, warnings, track

// Draw coneLayer
coneLayer.setMap(map);

// Listen for when coneLayer is drawn
var listener1 = google.maps.event.addListener(coneLayer, 'metadata_changed', function() {
  // When it's drawn (metadata changed), clear listener, draw warningsLayer ...
  google.maps.event.clearListeners(coneLayer, 'metadata_changed');
  warningsLayer.setMap(map);

  // .. and listen for when warningsLayer is drawn
  var listener2 = google.maps.event.addListener(warningsLayer, 'metadata_changed', function() {
    // When it's drawn, clear listener, draw trackLayer ...
    google.maps.event.clearListeners(warningsLayer, 'metadata_changed');
    trackLayer.setMap(map);

    // ... and listen for when trackLayer is drawn
    var listener3 = google.maps.event.addListener(trackLayer, 'metadata_changed', function() {
      // When it's drawn, clear listener and blank out the map-loading sign
      google.maps.event.clearListeners(trackLayer, 'metadata_changed');
      $('#loadingIndicator').html("");

    });

  });

});

// END SEQUENTIAL KML LOADING CODE

KML图层渲染顺序谷歌地图

3 个答案: