javascript - 带有来自 .kml 文件的地标的 Google map 多边形(使用 geoxml3 和 kmllayer)

Question

我正在尝试将多边形图层和地标图层合并到同一张 map 中。

但是，在使用 geoxml3 解析器从 .kml 文件加载多边形图层后。

我尝试加载几个 Placemarks 图层并成功，但 Placemarks 似乎在多边形下方。

尝试在网上搜索并尝试解析后才加载图层的建议，但没有用。还在 kmllayer 上尝试了 zIndex，但效果不佳。

如何使地标显示在多边形之上？

我的代码的一小部分如下所示。

var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: center
});

var geocoder = new google.maps.Geocoder();
var geoXml = new geoXML3.parser({
    map: map,
    singleInfoWindow: true,
    zoom : false,
    afterParse: loadPlacemarks
});
geoXml.parse('Polygons.kml');

function loadPlacemarks() {
    var src = "http://xxx.xxx.xxx.xxx/Placemarks.kml";
    var kmlLayer = new google.maps.KmlLayer(src, {
        suppressInfoWindows: false,
        preserveViewport: true,
        map: map,
        zIndex: 999
    });
}

Answer 1

最简单的选择是使用相同的技术(KmlLayer 或 geoxml3)加载两个 KML 文件。

要使用 KmlLayer 加载两者(需要是公开可用的 URL):

// Polygons
var kmlLayer1 = new google.maps.KmlLayer({
  map: map,
  preserveViewport: true,
  url: "http://www.geocodezip.com/geoxml3_test/us_states.xml"
});
// markers 
var kmlLayer2 = new google.maps.KmlLayer({
  map: map,
  preserveViewport: true,
  url: "http://www.geocodezip.com/geoxml3_test/tanagerproductions_locations_kml.xml"
});

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "United States"
  }, function(results, status) {
    if (status === 'OK') {
      map.fitBounds(results[0].geometry.viewport);

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
  var kmlLayer1 = new google.maps.KmlLayer({
    map: map,
    preserveViewport: true,
    url: "http://www.geocodezip.com/geoxml3_test/us_states.xml"
  });
  var kmlLayer2 = new google.maps.KmlLayer({
    map: map,
    preserveViewport: true,
    url: "http://www.geocodezip.com/geoxml3_test/tanagerproductions_locations_kml.xml"
  });
  // http://www.geocodezip.com/geoxml3_test/tanagerproductions_locations_kml.xml,http://www.geocodezip.com/geoxml3_test/us_states.xml

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

通过 geoxml3 ( example ) 加载它们:

geoXml = new geoXML3.parser({
  map: map,
  infoWindow: infowindow,
  singleInfoWindow: true
});
geoXml.parse([
  "http://www.geocodezip.com/geoxml3_test//OrlandoNeighborhoods_boundaries_kml.xml",
  "http://www.geocodezip.com/geoxml3_test//OrlandoNeighborhoods_Points_kml.xml"
]);