在Here maps api中从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);

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

解决方法

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

<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>

live example

代码片段：

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>

heremaps kml kml

在Here maps api中从kml文件设置标记样式

问题描述

解决方法

相关问答