KML图层渲染顺序Google地图

Question

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

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

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

有时，多边形层会在气球层的顶部渲染，有时会相反。

好像在地图被“缓存”之后？ 在浏览器中，它将以多边形层位于顶部的方式进行渲染。 反正有防止这种情况发生的方法吗？ 还是让一层始终在背景中？ 不幸的是，我无法在一个kml中映射这些图层。

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

更新的小提琴

Answer 2

我在这里工作

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

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

在此链接中有一个有趣的方法。 这是实际的订购代码：

// 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