KML 图层渲染顺序谷歌地图答案

【问题标题】：KML Layers rendering order google mapsKML 图层渲染顺序谷歌地图
【发布时间】：2013-12-02 20:46:46
【问题描述】：

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

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

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

有时多边形层渲染在气球层之上，有时则相反。

好像地图被“缓存”了？在浏览器中，它将与多边形图层一起渲染。有没有办法防止这种情况？或者让一层总是在后台？不幸的是，我无法在一公里内映射这些图层。

【问题讨论】：

标签： javascript google-maps kml jak

【解决方案1】：

图层按照从服务器接收到的顺序呈现（不一定是它们在代码中出现的顺序）。您可以通过在设置第二个的地图属性之前等待 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

【讨论】：

嘿，感谢您的评论。但是，这似乎会产生相同的行为。请参阅我更新的小提琴。 jsfiddle.net/uyTvB/2
你不想要底部有多边形的图层吗？ jsfiddle.net/uyTvB/3
啊，是的。我意识到该代码现在在做什么。我需要最后渲染我想要的那个！谢谢。 jsfiddle.net/uyTvB/4
注意，真正的解决方案是让 API 提供对 KmlLayers 和 something like zIndex (enhancement request) 的相对控制，而不是对添加层顺序的控制。
是的，我同意。我从 2010 年看到了对 google 的增强请求，但尚未收到任何结果。我希望我有更多的经验，这样我就可以投票给你所有的 cmets....:( 你会竭尽全力提供帮助

【解决方案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 低。

【讨论】：

谢谢，在最初的测试中，似乎使标记呈现在前面。我需要查看 API 以了解发生了什么。感谢您的努力。

【解决方案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

【讨论】：