KMZ 自定义地标图标未显示答案

【问题标题】：KMZ custom placemark icons not showing upKMZ 自定义地标图标未显示
【发布时间】：2020-09-02 20:01:57
【问题描述】：

我正在尝试制作一个带有一堆地标的 KMZ 文件，但它不适用于多个地标，所以我想我会只用一个地标对其进行测试，然后首先尝试弄清楚，简单的文件，仅此而已它是：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>

<Style id="My_Style">
<IconStyle> <Icon> <href>square.png</href> </Icon></IconStyle>
</Style> 

  <Placemark>
    <name>Brandonville_Horvath_Twr : Brandonville_Horvath Twr</name>
    <styleUrl> #My_Style</styleUrl>
    <Point>
      <coordinates>-76.21347,40.82783,0</coordinates>
    </Point>
  </Placemark>


</Document>
</kml>

然后，我将这个 kml 文件与这个 64x64 像素的红色方形 png 文件一起放入一个文件夹中，然后压缩该文件夹，将其命名为 test.kmz，然后将其导入 Google Earth。由于某种原因，它显示了红色的 x，我无法在网上找到一些常见错误的答案。

【问题讨论】：

标签： kml google-earth kmz

【解决方案1】：

根据the documentation，将图标的嵌入图像放在 KML 中的一个目录中，然后引用它们，包括该目录名称：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>

<Style id="My_Style">
<IconStyle> <Icon> <href>files/square.png</href> </Icon></IconStyle>
</Style> 

  <Placemark>
    <name>Brandonville_Horvath_Twr : Brandonville_Horvath Twr</name>
    <styleUrl>#My_Style</styleUrl>
    <Point>
      <coordinates>-76.21347,40.82783,0</coordinates>
    </Point>
  </Placemark>


</Document>
</kml>

zip 文件结构如下所示：

live example

代码 sn-p：

"use strict";

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/kmz/SO_20200902_embeddedImage_filesB.kmz",
    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>