KMZ自定义地标图标未显示

问题描述

我正在尝试制作带有一堆地标的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，而我却无法在线找到一些常见的错误答案。

解决方法

每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

代码段：

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

KMZ自定义地标图标未显示

问题描述

解决方法

相关问答