1

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

但是，在使用 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
    });
}
4

1 回答 1

3

最简单的选择是使用相同的技术（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 加载它们（示例）：

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"
]);
于 2016-10-28T14:22:05.767 回答