0

我有一个 kml 文件：

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Placemark>
    <name>Ab Kettleby</name>
    <Icon>
    <href>https://wcsb.nz/wellringers/dove6.bmp</href>
    </Icon>
      <Point>
         <coordinates>-0.92747,52.79858</coordinates>
      </Point>
  </Placemark>
</kml>

我从一个带有一段 javascript 的 html 文件中引用它：

let reader = new H.data.kml.Reader('doveshort1.kml');
reader.parse();
kml = reader.getLayer();
map.addLayer(kml);

读取该文件是因为在正确位置生成了带有默认气泡标记的地图。为什么不使用引用的标记？

4

1 回答 1

0

您的 KML 无效，请参阅KML 参考。

<Placemark id="ID">
  <StyleSelector>...</StyleSelector>
</Placemark>

<StyleSelector>是抽象的，扩展的<Style>

<Style id="ID">
<!-- extends StyleSelector -->
<!-- specific to Style -->
  <IconStyle>...</IconStyle>
</Style>

<IconStyle id="ID">
  <!-- specific to IconStyle -->
  <Icon>
    <href>...</href>
  </Icon>
</IconStyle>

这有效：

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Placemark>
    <name>Ab Kettleby</name>
    <Style id="ID">
<!-- specific to Style -->
     <IconStyle>
      <Icon>
       <href>https://wcsb.nz/wellringers/dove6.bmp</href>
      </Icon>
     </IconStyle>
   </Style>
      <Point>
         <coordinates>-0.92747,52.79858</coordinates>
      </Point>
  </Placemark>
</kml>

活生生的例子

Google JavaScript API v3 地图的屏幕截图

代码片段：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: {
      lat: 41.876,
      lng: -87.624
    },
  });
  const ctaLayer = new google.maps.KmlLayer({
    url: "http://www.geocodezip.com/geoxml3_test/kml/SO_20210121_Icon1.kml",
    map: map,
  });
}
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>KML Layers</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

于 2021-01-22T05:25:32.257 回答