Question

我正在尝试将Polygon图层和地标图层合并到同一个地图中。

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

我尝试加载一些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"></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"
]);

带有.kml文件地标的Google Maps Polygon（使用geoxml3＆amp; kmllayer）

1 个答案: