javascript - KML 图层渲染顺序谷歌地图

Question

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

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

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

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

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

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

更新的小提琴

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